Initial commit

App.js

-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
-
-export default function App() {
-  return (
-    <View style={styles.container}>
-      <Text>Open up App.js to start working on your app!</Text>
-      <StatusBar style="auto" />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

Sayfalar/App.js

+import "react-native-gesture-handler";
+import * as React from "react";
+import { NavigationContainer } from "@react-navigation/native";
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import { createStackNavigator } from "@react-navigation/stack";
+import TabBar from "./tab-bar";
+import { ThemeProvider } from "styled-components";
+import Box from "../Sayfalar/Ekranlar/box";
+import SearchEkrani from "./Ekranlar/search";
+import HistoryEkrani from "./Ekranlar/history";
+import FavoriteEkrani from "./Ekranlar/favorite";
+import DetailEkrani from "./Ekranlar/detail";
+import { SafeAreaView } from "react-native";
+import theme from "./Ekranlar/tema";
+const HomeStack = createStackNavigator();
+const Tab = createBottomTabNavigator();
+
+function SearchStack() {
+  return (
+    <HomeStack.Navigator headerMode="none">
+      <HomeStack.Screen name="Search" component={SearchEkrani} />
+      <HomeStack.Screen name="Detail" component={DetailEkrani} />
+    </HomeStack.Navigator>
+  );
+}
+
+function App() {
+  return (
+    <ThemeProvider theme={theme}>
+      <NavigationContainer>
+        <Tab.Navigator
+          initialRouteName="Search"
+          tabBar={(props) => <TabBar {...props} />}
+        >
+          <Tab.Screen name="History" component={HistoryEkrani} />
+          <Tab.Screen
+            name="Search"
+            component={SearchStack}
+            options={{ headerShown: false }}
+          />
+          <Tab.Screen name="Favorite" component={FavoriteEkrani} />
+        </Tab.Navigator>
+      </NavigationContainer>
+    </ThemeProvider>
+  );
+}
+export default App;

Sayfalar/Ekranlar/box-center.js

+import styled from "styled-components";
+import Box from "./box";
+
+
+const BoxCenter = styled(Box)({});
+BoxCenter.defaultProps={
+    flex:1,
+    justifyContent:'center',
+    alignItems:'center',
+}
+
+export default BoxCenter;
\ No newline at end of file

Sayfalar/Ekranlar/box.js

+import { View } from "react-native";
+import styled from "styled-components";
+import {compose,color,size,space,flexbox,borderRadius} from 'styled-system';
+
+const Box = styled(View)(
+    compose(
+        flexbox,
+        space,
+        color,
+        size,
+        borderRadius,
+    ),
+);
+
+export default Box;
\ No newline at end of file

Sayfalar/Ekranlar/button.js

+import { TouchableOpacity } from "react-native";
+import styled from "styled-components";
+import { compose, color, size, space, flexbox, position } from "styled-system";
+
+const Button = styled(TouchableOpacity)(
+  compose(flexbox, space, color, size, position)
+);
+
+Button.defaultProps = {
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "center",
+};
+
+export default Button;

Sayfalar/Ekranlar/detail.js

+import {Text,View} from 'react-native';
+import * as React from 'react';
+function DetailEkrani() {
+    return (
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+        <Text>Detay</Text>
+        
+      </View>
+);
+  }
+  export default DetailEkrani;
\ No newline at end of file

Sayfalar/Ekranlar/favorite.js

+import {Text,View} from 'react-native';
+import * as React from 'react';
+
+function FavoriteEkrani() {
+    return (
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+        <Text>Favoriler</Text>
+      </View>
+    );
+  }
+  export default FavoriteEkrani;
\ No newline at end of file

Sayfalar/Ekranlar/history.js

+import { Text, StatusBar } from "react-native";
+import * as React from "react";
+import Box from "../Ekranlar/box";
+import SafeAreaView from "react-native-safe-area-view";
+import { useFocusEffect } from "@react-navigation/native";
+function HistoryEkrani() {
+  useFocusEffect(
+    React.useCallback(() => {
+      StatusBar.setBarStyle("dark-content"), [];
+    })
+  );
+
+  return (
+    <Box as={SafeAreaView} flex={1}>
+      <Text>Arama Geçmişi</Text>
+    </Box>
+  );
+}
+export default HistoryEkrani;

Sayfalar/Ekranlar/input.js

+import { TextInput } from "react-native";
+import styled from "styled-components";
+import {
+  compose,
+  color,
+  size,
+  typography,
+  space,
+  borderRadius,
+  shadow,
+} from "styled-system";
+import theme from "../Ekranlar/tema";
+
+const Input = styled(TextInput).attrs((props) => ({
+  placeholderTextColor: theme.colors[props.placeholderTextColor] || "#999",
+}))(compose(typography, space, color, size, borderRadius, shadow));
+
+export default Input;

Sayfalar/Ekranlar/search.js

+import { ImageBackground, StatusBar, Text } from "react-native";
+import * as React from "react";
+import { Logo } from "../ikonlar";
+import Search from "../search";
+import Box from "./box";
+import kirmizi from "../resim/kirmizi.jpg";
+import SafeAreaView from "react-native-safe-area-view";
+import { useFocusEffect } from "@react-navigation/native";
+function SearchEkrani({}) {
+  const [isSearchFocus, setSearchFocus] = React.useState(false);
+
+  useFocusEffect(
+    React.useCallback(() => {
+      StatusBar.setBarStyle("light-content"), [];
+    })
+  );
+  return (
+    <Box as={SafeAreaView} bg="red" flex={1}>
+      <StatusBar barStyle="light - content" />
+
+      {/*baslık*/}
+      <Box position="relative" zIndex={1} height={285}>
+        <Box
+          as={ImageBackground}
+          source={kirmizi}
+          style={{ width: "100%", height: "100%" }}
+        >
+          {/* logo */}
+          <Box flex={1} alignItems="center" justifyContent="center">
+            <Logo width={120} color="white" />
+          </Box>
+          {/*arama*/}
+          <Box p={16} mb={-42}>
+            <Search onChangeFocus={(status) => setSearchFocus(status)} />
+          </Box>
+        </Box>
+      </Box>
+      <Box flex={1} bg="white" pt={26}>
+        <Box flex={1} p={30}>
+          <Text>Merhaba</Text>
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+export default SearchEkrani;

Sayfalar/Ekranlar/tema.js

+const space = [];
+const radii = {
+  normal: 8,
+  full: 9999,
+};
+const colors = {
+  red: "#E11E3C",
+  softRed: "#F8F8F8",
+  birlesikKelimeKoyu: "#E8EAED",
+  birlesikKelimeOrta: "#73A5AA",
+  birlesikKelimeAcik: "#E8F0F2",
+  atasozleriKoyu: "#4F3822",
+  atasozleriOrta: "#BB8E62",
+  atasozleriAcik: "#F9F5F1",
+  textKoyu: "#0A151F",
+  textOrta: "#48515B",
+  textAcik: "#758291",
+};
+export default {
+  space,
+  radii,
+  colors,
+};

Sayfalar/Ekranlar/text.js

+import { Text as T } from "react-native";
+import styled from "styled-components";
+import { compose, color, size, typography, space } from "styled-system";
+
+const Text = styled(T)(compose(typography, space, color, size));
+
+export default Text;

Sayfalar/TDK.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://web.resource.org/cc/"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   height="172"
+   width="627"
+   id="svg2"
+   sodipodi:version="0.32"
+   inkscape:version="0.45.1"
+   version="1.0"
+   sodipodi:docbase="C:\Users\Paweł\Desktop"
+   sodipodi:docname="TDK wordmark.svg"
+   inkscape:output_extension="org.inkscape.output.svg.inkscape">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:cx="441.26128"
+     inkscape:cy="142.93222"
+     inkscape:zoom="0.5254709"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     width="627px"
+     height="172px"
+     inkscape:window-width="867"
+     inkscape:window-height="575"
+     inkscape:window-x="224"
+     inkscape:window-y="154" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:groupmode="layer"
+     inkscape:label="Warstwa 1"
+     id="layer1">
+    <path
+       id="path2190"
+       d="M 77.999995,103.92055 L 77.999995,35.9725 L 39,35.9725 L 0,35.9725 L 0,18.48587 L 0,0.99924 L 101.49999,0.99924 L 202.99999,0.99924 L 202.99999,18.47427 L 202.99999,35.94931 L 163.74999,36.21071 L 124.49999,36.47212 L 124.243,104.17036 L 123.98601,171.8686 L 100.993,171.8686 L 77.999995,171.8686 L 77.999995,103.92055 z M 212.99999,86.49961 L 212.99999,0.99924 L 274.36901,0.99924 C 342.0218,0.99924 346.45332,1.31078 360.87398,7.08069 C 371.59097,11.36869 379.30115,16.32942 387.82783,24.42273 C 404.89707,40.62445 413.51825,58.82269 414.70961,81.1668 C 415.74723,100.62739 411.26358,117.40505 400.87998,132.9169 C 388.66328,151.167 371.34948,163.4035 349.72589,169.0696 C 341.79635,171.1475 339.18529,171.2391 277.25,171.6126 L 212.99999,172 L 212.99999,86.49961 z M 343.31968,131.6655 C 369.53731,119.15651 379.96832,89.85783 367.37709,64.093 C 360.54757,50.1181 346.47105,39.55799 331.31977,37.04305 C 326.92223,36.31312 312.60155,36.01069 291,36.19158 L 257.5,36.47212 L 257.24064,86.22765 L 256.98128,135.9831 L 296.24064,135.6899 L 335.5,135.3965 L 343.31968,131.6655 z M 425,85.9343 L 425,0 L 448.98891,0 L 472.97781,0 L 473.23891,40.90747 L 473.5,81.81492 L 489,67.78519 C 497.52499,60.06884 506.75,51.63374 509.5,49.04054 C 512.25,46.44733 525.22699,34.57718 538.33776,22.66242 L 562.17552,0.99924 L 592.83776,1.03985 L 623.5,1.08045 L 620.38973,3.78774 C 578.30904,40.41639 531.00453,82.42071 531.21911,82.96732 C 531.37361,83.36083 552.98749,103.33249 579.25,127.3488 C 605.5125,151.3651 627,171.2069 627,171.4417 C 627,171.6765 612.71249,171.8597 595.25,171.8487 L 563.5,171.8289 L 518.5,127.7185 L 473.5,83.60807 L 473.2396,127.7383 L 472.9792,171.8686 L 448.9896,171.8686 L 425,171.8686 L 425,85.9343 z "
+       style="fill:#006ab6" />
+  </g>
+</svg>

Sayfalar/ara.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
\ No newline at end of file

Sayfalar/button.js

+import { TouchableOpacity } from "react-native";
+import styled from "styled-components";
+import {compose,color,size,space,flexbox,layout,borderRadius} from  'styled-system';
+
+const Button =styled(TouchableOpacity)(
+    compose(
+        flexbox,
+        space,
+        color,
+        size,
+        layout,
+        borderRadius,
+    ),
+);
+Button.defaultProps={
+    flexDirection:'row',
+    alignItems:'center',
+    justifyContent:'center',
+};
+
+export default Button;
\ No newline at end of file

Sayfalar/ikonlar/Ara.js

+import * as React from "react";
+import Svg, { Circle, Path } from "react-native-svg";
+const SvgAra = (props) => (
+  <Svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={2}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className=""
+    {...props}
+  >
+    <Circle cx={11} cy={11} r={8} />
+    <Path d="m21 21-4.35-4.35" />
+  </Svg>
+);
+export default SvgAra;

Sayfalar/ikonlar/Logo.js

+import * as React from "react";
+import Svg, { G, Path, Defs, ClipPath } from "react-native-svg";
+const SvgLogo = (props) => (
+  <Svg
+    width={86}
+    height={40}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className=""
+    {...props}
+  >
+    <G clipPath="url(#logo_svg__a)" fill="currentColor">
+      <Path d="M8.212 7.815H0V0h25.695v7.815h-8.212v20H8.212v-20ZM27.815 0H38.41c11.126 0 16.556 5.43 16.556 13.642v.133c0 8.212-5.695 14.04-16.954 14.04H27.815V0Zm9.271 8.08v11.655h1.59c4.238 0 7.02-1.722 7.02-5.828v-.132c0-3.974-2.782-5.828-7.02-5.828h-1.59v.132ZM57.616 0h9.272v10.464L74.835 0h10.86l-9.668 12.053 9.8 15.762H74.703l-5.43-8.875-2.385 2.914v5.96h-9.271V0ZM2.384 35.497H.662v-.928h4.239v.928H3.31v4.37h-.927v-4.37ZM6.623 37.748v-3.046h.927v3.046c0 .928.53 1.457 1.324 1.457.795 0 1.325-.53 1.325-1.457v-3.046h.927v3.046c0 1.59-.927 2.384-2.252 2.384-1.324-.132-2.251-.927-2.251-2.384Zm1.06-4.37h.926v.794h-.927v-.794Zm1.589 0h.927v.794h-.927v-.794ZM13.377 34.702h2.384c.663 0 1.193.132 1.59.53.265.265.397.662.397 1.192 0 .927-.53 1.457-1.192 1.59L18.013 40h-1.06l-1.324-1.854h-1.192V40h-.927v-5.298h-.133Zm2.252 2.649c.662 0 1.06-.397 1.06-.927s-.398-.927-1.06-.927h-1.324v1.721h1.324v.133ZM19.603 34.702h.927v2.649l2.517-2.649h1.191l-2.251 2.252L24.239 40h-1.192l-1.855-2.384-.662.795V40h-.927v-5.298ZM29.14 34.702h1.986c1.722 0 2.781 1.192 2.781 2.649S32.715 40 31.126 40h-1.987v-5.298Zm.926.795v3.576h1.06c1.06 0 1.854-.795 1.854-1.722 0-1.06-.662-1.854-1.854-1.854h-1.06ZM35.894 33.377h.927v.795h-.927v-.794Zm0 1.325h.927V40h-.927v-5.298ZM39.073 34.702H40v4.503h2.782V40h-3.709v-5.298ZM47.682 34.702h.927v2.649l2.517-2.649h1.192l-2.252 2.252L52.318 40h-1.192l-1.854-2.384-.663.795V40h-.927v-5.298ZM53.775 37.748v-3.046h.927v3.046c0 .928.53 1.457 1.325 1.457.794 0 1.324-.53 1.324-1.457v-3.046h.927v3.046c0 1.59-.927 2.384-2.251 2.384-1.325-.132-2.252-.927-2.252-2.384ZM60.53 34.702h2.384c.662 0 1.192.132 1.59.53.264.265.397.662.397 1.192 0 .927-.53 1.457-1.192 1.59L65.165 40h-1.06l-1.324-1.854H61.59V40h-.927v-5.298h-.132Zm2.251 2.649c.663 0 1.06-.397 1.06-.927s-.397-.927-1.06-.927h-1.324v1.721h1.324v.133ZM66.755 37.748v-3.046h.927v3.046c0 .928.53 1.457 1.325 1.457.794 0 1.324-.53 1.324-1.457v-3.046h.927v3.046c0 1.59-.927 2.384-2.251 2.384-1.457-.132-2.252-.927-2.252-2.384ZM73.378 34.702h.927l1.59 2.517 1.589-2.517h.927V40h-.927v-3.841l-1.722 2.517-1.59-2.517V40h-.927v-5.298h.133ZM80.662 37.748v-3.046h.927v3.046c0 .928.53 1.457 1.325 1.457.795 0 1.325-.53 1.325-1.457v-3.046h.927v3.046c0 1.59-.927 2.384-2.252 2.384-1.325-.132-2.252-.927-2.252-2.384Z" />
+    </G>
+    <Defs>
+      <ClipPath id="logo_svg__a">
+        <Path d="M0 0h85.828v40H0V0Z" fill="currentColor" />
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+export default SvgLogo;

Sayfalar/ikonlar/Tdk.js

+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+const SvgTdk = (props) => (
+  <Svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={172}
+    width={627}
+    className=""
+    {...props}
+  >
+    <Path
+      d="M78 103.92V35.973H0V1h203v34.95l-39.25.262-39.25.261-.257 67.698-.257 67.699H78V103.92zM213 86.5V1h61.369c67.653 0 72.084.31 86.505 6.08 10.717 4.289 18.427 9.25 26.954 17.343 17.07 16.201 25.69 34.4 26.882 56.744 1.037 19.46-3.446 36.238-13.83 51.75-12.217 18.25-29.53 30.487-51.154 36.153-7.93 2.078-10.54 2.17-72.476 2.543L213 172V86.5zm130.32 45.166c26.217-12.51 36.648-41.808 24.057-67.573-6.83-13.975-20.906-24.535-36.057-27.05-4.398-.73-18.718-1.032-40.32-.851l-33.5.28-.26 49.756-.259 49.755 39.26-.293 39.259-.293 7.82-3.731zM425 85.934V0h47.978l.26 40.907.262 40.908 15.5-14.03c8.525-7.716 17.75-16.151 20.5-18.744 2.75-2.594 15.727-14.464 28.838-26.379L562.176 1l30.662.04 30.662.041-3.11 2.708c-42.081 36.628-89.385 78.633-89.17 79.18.154.393 21.767 20.364 48.03 44.38 26.263 24.017 47.75 43.859 47.75 44.094 0 .234-14.288.418-31.75.407l-31.75-.02-45-44.11-45-44.11-.26 44.13-.26 44.13H425V85.934z"
+      style={{
+        fill: "#006ab6",
+      }}
+    />
+  </Svg>
+);
+export default SvgTdk;

Sayfalar/ikonlar/X.js

+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+const SvgX = (props) => (
+  <Svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={2}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className=""
+    {...props}
+  >
+    <Path d="M18 6 6 18M6 6l12 12" />
+  </Svg>
+);
+export default SvgX;

Sayfalar/ikonlar/index.js

+export { default as Ara } from "./Ara";
+export { default as Logo } from "./Logo";
+export { default as Tdk } from "./Tdk";
+export { default as X } from "./X";