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 { Sol, More } from "./ikonlar";
+import FavoriteEkrani from "./Ekranlar/favorite";
+import DetailEkrani from "./Ekranlar/detail";
+import { SafeAreaView } from "react-native";
+import theme from "./Ekranlar/tema";
+import Button from "./button";
+const HomeStack = createStackNavigator();
+const Tab = createBottomTabNavigator();
+
+function SearchStack() {
+  return (
+    <HomeStack.Navigator>
+      <HomeStack.Screen
+        name="Search"
+        component={SearchEkrani}
+        options={() => {
+          return { headMode: "none", header: () => {} };
+        }}
+      />
+      <HomeStack.Screen
+        name="Detail"
+        component={DetailEkrani}
+        options={({ route, navigation }) => {
+          return {
+            title: (route.params && route.params.title) || "Boş",
+            headerStyle: {
+              backgroundColor: theme.colors.softRed,
+              shadowColor: "transparent",
+            },
+            headerLeft: () => (
+              <Button
+                px={20}
+                height="100%"
+                onPress={() => navigation.navigate("Search")}
+              >
+                <Sol color={theme.colors.textKoyu} />
+              </Button>
+            ),
+            headerRight: () => (
+              <Button
+                px={20}
+                height="100%"
+                onPress={() => navigation.navigate("Search")}
+              >
+                <More color={theme.colors.textKoyu} />
+              </Button>
+            ),
+          };
+        }}
+      />
+    </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/aksiyonbutton.js

+import React from "react";
+import Button from "../button";
+import Text from "./text";
+
+function AksiyonButton({ children, ...props }) {
+  return (
+    <Button
+      style={{
+        shadowColor: "#000",
+        shadowOpacity: 0.16,
+        shadowRadius: 4,
+        shadowOffset: {
+          width: 0,
+          height: 1,
+        },
+      }}
+      minWidth="aksiyonButton"
+      height="aksiyonButton"
+      borderRadius="full"
+      bg="white"
+      px={8}
+      {...props}
+    >
+      {children}
+    </Button>
+  );
+}
+export function AksiyonButtonTitle({ children, ...props }) {
+  return (
+    <Text color="textAcik" ml={8} mr={8} fontWeight="bold" {...props}>
+      {children}
+    </Text>
+  );
+}
+
+export default AksiyonButton;

Sayfalar/Ekranlar/bg.js

+import * as React from "react";
+import { ImageBackground } from "react-native";
+
+import Box from "./box";
+
+import bg from "../resim/kirmizi.jpg";
+
+function Bg({ children, ...props /*kapsayıcısına birşeyler eklemek için*/ }) {
+  return (
+    <Box
+      as={ImageBackground}
+      source={bg}
+      style={{ width: "100%", height: "100%" }}
+      {...props}
+    >
+      {children}
+    </Box>
+  );
+}
+export default Bg;

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,
+  border,
+  flexbox,
+  borderRadius,
+} from "styled-system";
+
+const Box = styled(View)(
+  compose(flexbox, space, border, color, size, borderRadius)
+);
+
+export default Box;

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/card.js

+import React from "react";
+import Box from "./box";
+import Text from "./text";
+import theme from "./tema";
+import Button from "./button";
+
+export function CardContainer({ children, ...props }) {
+  return (
+    <Button py={16} px={12} bg="white" borderRadius="normal" {...props}>
+      <Box flex={1} borderLeftWidth={3} borderLeftColor="light" pl={12}>
+        {children}
+      </Box>
+    </Button>
+  );
+}
+export function CardTitle({ children }) {
+  return (
+    <Text fontSize={18} fontWeight="bold">
+      {children}
+    </Text>
+  );
+}
+export function CardSummary({ children }) {
+  return (
+    <Text color={theme.colors.textOrta} fontSize={14} mt={8}>
+      {children}
+    </Text>
+  );
+}

Sayfalar/Ekranlar/detail.js

+import * as React from "react";
+import SafeAreaView from "react-native-safe-area-view";
+import { useFocusEffect } from "@react-navigation/native";
+import { StatusBar, ScrollView } from "react-native";
+import Text from "./text";
+import AksiyonButton, { AksiyonButtonTitle } from "./aksiyonbutton";
+import { Fav2, Ses1, Parmak } from "../ikonlar";
+import {
+  DetailItemContainer,
+  DetailItemTitle,
+  DetailItemSummary,
+} from "./detailitem";
+
+import Box from "./box";
+import theme from "./tema";
+
+function DetailEkrani() {
+  useFocusEffect(
+    React.useCallback(() => {
+      StatusBar.setBarStyle("dark-content"), [];
+    })
+  );
+  return (
+    <Box as={SafeAreaView} bg="softRed" flex={1}>
+      <Box as={ScrollView} p={16}>
+        <Box>
+          <Text fontSize={32} fontWeight="bold">
+            Detay
+          </Text>
+          <Text color="textAcik" mt={6}>
+            arapça kalem{" "}
+          </Text>
+        </Box>
+        <Box flexDirection="row" mt={24}>
+          <AksiyonButton>
+            <Ses1 width={24} height={24} color={theme.colors.textAcik} />
+          </AksiyonButton>
+          <AksiyonButton ml={12}>
+            <Fav2 width={24} height={24} color={theme.colors.red} />
+          </AksiyonButton>
+          <AksiyonButton ml="auto">
+            <Parmak width={24} height={24} color={theme.colors.textAcik} />
+            <AksiyonButtonTitle>Türk İşaret Dili</AksiyonButtonTitle>
+          </AksiyonButton>
+        </Box>
+        <Box mt={32}>
+          <DetailItemContainer>
+            <DetailItemTitle>
+              Yazma,çizme vb. işlerde kullanılan çeşitli biçimlerde araç.
+            </DetailItemTitle>
+            <DetailItemSummary>
+              "Kağıt, kalem, mürekkep, hepsi masanın üstündedir." Falih Rıfkı
+              Atay
+            </DetailItemSummary>
+          </DetailItemContainer>
+          <DetailItemContainer border>
+            <DetailItemTitle>
+              Yazma,çizme vb. işlerde kullanılan çeşitli biçimlerde araç.
+            </DetailItemTitle>
+            <DetailItemSummary>
+              "Kağıt, kalem, mürekkep, hepsi masanın üstündedir." Falih Rıfkı
+              Atay
+            </DetailItemSummary>
+          </DetailItemContainer>
+          <DetailItemContainer border>
+            <DetailItemTitle>
+              Yazma,çizme vb. işlerde kullanılan çeşitli biçimlerde araç.
+            </DetailItemTitle>
+            <DetailItemSummary>
+              "Kağıt, kalem, mürekkep, hepsi masanın üstündedir." Falih Rıfkı
+              Atay
+            </DetailItemSummary>
+          </DetailItemContainer>
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+export default DetailEkrani;

Sayfalar/Ekranlar/detailitem.js

+import React from "react";
+import Box from "./box";
+import Text from "./text";
+
+export function DetailItemContainer({ children, border, ...props }) {
+  return (
+    <Box position="relative" bg="white" py={20} px={28} {...props}>
+      {border && (
+        <Box
+          position="absolute"
+          left={12}
+          right={12}
+          top={0}
+          height={1}
+          bg="light"
+        />
+      )}
+      <Box flexDirection="row">
+        <Text color="textAcik" ml={-14} mr={8}>
+          1
+        </Text>
+        <Text color="red">İSİM</Text>
+      </Box>
+      <Box mt={8}>{children}</Box>
+    </Box>
+  );
+}
+export function DetailItemTitle({ children, ...props }) {
+  return <Text fontWeight="600">{children}</Text>;
+}
+export function DetailItemSummary({ children, ...props }) {
+  return (
+    <Text ml={10} mt={12} color="textAcik" fontWeight="500">
+      {children}
+    </Text>
+  );
+}

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 { FlatList, StatusBar, Animated, ActivityIndicator } from "react-native";
+import * as React from "react";
+import { Logo } from "../ikonlar";
+import Search from "../search";
+import Box from "./box";
+
+import Text from "./text";
+import Bg from "./bg";
+import theme from "./tema";
+import SafeAreaView from "react-native-safe-area-view";
+import { useFocusEffect } from "@react-navigation/native";
+import { CardTitle, CardSummary, CardContainer } from "./card";
+import { opacity } from "styled-system";
+import { SimpleCardContainer, SimpleCardTitle } from "./simpleCard";
+
+const DATA = [
+  {
+    id: "1",
+    title: "First Item 1",
+    summary: "açıklama 1",
+  },
+  {
+    id: "2",
+    title: "First Item 2",
+    summary: "açıklama 2",
+  },
+  {
+    id: "3",
+    title: "First Item 3",
+    summary: "açıklama 3",
+  },
+];
+function SearchEkrani({ navigation }) {
+  const [isSearchFocus, setSearchFocus] = React.useState(false);
+  const [fadeAnim] = React.useState(new Animated.Value(260));
+  const [opaklik] = React.useState(new Animated.Value(1));
+  const [homeData, setHomeData] = React.useState(null);
+
+  const getHomeData = async () => {
+    const response = await fetch("https://sozluk.gov.tr/icerik");
+    const data = await response.json();
+    setHomeData(data);
+  };
+  React.useEffect(() => {
+    getHomeData();
+  }, []);
+
+  React.useEffect(() => {
+    if (isSearchFocus) {
+      //opaklık
+      Animated.timing(opaklik, {
+        useNativeDriver: false,
+        toValue: 0,
+        duration: 500,
+      }).start();
+      //yükseklik
+      Animated.timing(fadeAnim, {
+        useNativeDriver: false,
+        toValue: 84,
+        duration: 500,
+      }).start();
+    } else {
+      //opaklik
+      Animated.timing(opaklik, {
+        useNativeDriver: false,
+        toValue: 1,
+        duration: 500,
+      }).start();
+      //yükseklik
+      Animated.timing(fadeAnim, {
+        useNativeDriver: false,
+        toValue: 260,
+        duration: 500,
+      }).start();
+    }
+  });
+
+  useFocusEffect(
+    React.useCallback(() => {
+      StatusBar.setBarStyle(isSearchFocus ? "dark-content" : "light-content"),
+        [];
+    })
+  );
+  return (
+    <Box as={SafeAreaView} bg={isSearchFocus ? "softRed" : "red"} flex={1}>
+      {/*baslık*/}
+      <Box as={Animated.View} position="relative" zIndex={1} height={fadeAnim}>
+        <Box mt={-45} as={Animated.View} style={{ opacity: opaklik }}>
+          <Bg>
+            {/* logo */}
+            <Box flex={1} alignItems="center" justifyContent="center">
+              <Logo width={120} color="white" />
+            </Box>
+          </Bg>
+        </Box>
+
+        {/*arama*/}
+        <Box
+          position="absolute"
+          left={0}
+          bottom={isSearchFocus ? 0 : -42}
+          p={16}
+          width="100%"
+        >
+          <Search onChangeFocus={(status) => setSearchFocus(status)} />
+        </Box>
+      </Box>
+      <Box flex={1} bg="softRed" pt={isSearchFocus ? 0 : 26}>
+        {isSearchFocus ? (
+          <Box flex={1}>
+            {
+              <FlatList
+                style={{ padding: 16 }}
+                data={DATA}
+                keyExtractor={(item) => item.id}
+                renderItem={({ item }) => (
+                  <Box py={6}>
+                    <SimpleCardContainer>
+                      <SimpleCardTitle>{item.title}</SimpleCardTitle>
+                    </SimpleCardContainer>
+                  </Box>
+                )}
+                ListHeaderComponent={
+                  <Text mb={10} color="textAcik">
+                    Son Arananlar
+                  </Text>
+                }
+              />
+            }
+          </Box>
+        ) : (
+          <Box px={16} py={40} flex={1}>
+            <Box>
+              <Text color={theme.colors.textAcik}>Bir Kelime</Text>
+              <CardContainer
+                mt={10}
+                onPress={() =>
+                  navigation.navigate("Detail", { title: "onpara" })
+                }
+              >
+                {homeData ? (
+                  <>
+                    <CardTitle>
+                      {homeData && homeData.kelime[0].madde}
+                    </CardTitle>
+                    <CardSummary>
+                      {homeData && homeData.kelime[0].anlam}
+                    </CardSummary>
+                  </>
+                ) : (
+                  <ActivityIndicator />
+                )}
+              </CardContainer>
+            </Box>
+            <Box mt={40}>
+              <Text color={theme.colors.textAcik}>Bir deyim - Atasözü</Text>
+              <CardContainer
+                mt={10}
+                onPress={() =>
+                  navigation.navigate("Detail", {
+                    title: "siyem siyem ağlamak",
+                  })
+                }
+              >
+                <CardTitle>{homeData && homeData.atasoz[0].madde}</CardTitle>
+                <CardSummary>
+                  {homeData && homeData.atasoz[0].anlam}
+                </CardSummary>
+              </CardContainer>
+            </Box>
+
+            {/*<FlatList
+              data={DATA}
+              renderItem={({ item }) => (
+                <Box py={5}>
+                  <CardContainer>
+                    <CardTitle>{item.title}</CardTitle>
+                    <CardSummary>{item.summary}</CardSummary>
+                  </CardContainer>
+                </Box>
+              )}
+              keyExtractor={(item) => item.id}
+              />*/}
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+}
+
+export default SearchEkrani;

Sayfalar/Ekranlar/simpleCard.js

+import React from "react";
+import Text from "./text";
+import theme from "./tema";
+import Button from "./button";
+
+export function SimpleCardContainer({ children, ...props }) {
+  return (
+    <Button
+      justifyContent="flex-start"
+      p={16}
+      bg="white"
+      borderRadius="normal"
+      {...props}
+    >
+      {children}
+    </Button>
+  );
+}
+export function SimpleCardTitle({ children }) {
+  return (
+    <Text fontSize={16} fontWeight="bold">
+      {children}
+    </Text>
+  );
+}

Sayfalar/Ekranlar/tema.js

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

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/bookmark.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+     viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2"
+     stroke-linecap="round" stroke-linejoin="round"
+     class="feather feather-bookmark">
+  <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
+</svg>