Initial commit

.expo-shared/assets.json

+{
+  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}

.gitignore

+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store

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) || "Detay",
+            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/LoaderText.js

+import React from "react";
+
+import Box from "./box";
+
+export default function LoaderText({ ...props }) {
+  return <Box bg="light" width={120} height={16} {...props} />;
+}

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 { Fav, Ses1, Parmak } from "../ikonlar";
+import DetailItem from "./detailitem";
+
+import LoaderText from "./LoaderText";
+import Box from "./box";
+import theme from "./tema";
+
+function DetailEkrani({ route }) {
+  const keyword = route.params.keyword;
+
+  const [data, setData] = React.useState(null);
+  useFocusEffect(
+    React.useCallback(() => {
+      StatusBar.setBarStyle("dark-content"), [];
+    })
+  );
+
+  const getDetailData = async () => {
+    const response = await fetch("https://sozluk.gov.tr/gts?ara=" + keyword);
+    const data = await response.json();
+    console.log(data[0]);
+    setData(data[0]);
+  };
+  React.useEffect(() => {
+    getDetailData();
+  }, []);
+
+  return (
+    <Box as={SafeAreaView} bg="softRed" flex={1}>
+      <Box as={ScrollView} p={16}>
+        <Box>
+          <Text fontSize={32} fontWeight="bold">
+            {keyword}
+          </Text>
+          {data?.telaffuz || data?.lisan ? (
+            <Text color="textAcik" mt={6}>
+              {data?.telaffuz && data?.telaffuz} {data?.lisan}
+            </Text>
+          ) : null}
+        </Box>
+        <Box flexDirection="row" mt={24}>
+          <AksiyonButton disabled={!data}>
+            <Ses1 width={24} height={24} color={theme.colors.textAcik} />
+          </AksiyonButton>
+          <AksiyonButton ml={12} disabled={!data}>
+            <Fav width={24} height={24} color={theme.colors.textAcik} />
+          </AksiyonButton>
+          <AksiyonButton ml="auto" disabled={!data}>
+            <Parmak width={24} height={24} color={theme.colors.textAcik} />
+            <AksiyonButtonTitle>Türk İşaret Dili</AksiyonButtonTitle>
+          </AksiyonButton>
+        </Box>
+        <Box mt={32}>
+          {data
+            ? data.anlamlarListe.map((item) => (
+                <DetailItem
+                  data={item}
+                  key={item.anlam_sira}
+                  border={item.anlam_sira != "1"}
+                />
+              ))
+            : [1, 2, 3].map((index) => (
+                <DetailItem border={index != 1} key={index}>
+                  <LoaderText />
+                  <LoaderText width={200} mt={10} />
+                </DetailItem>
+              ))}
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+export default DetailEkrani;

Sayfalar/Ekranlar/detailitem.js

+import React from "react";
+import Box from "./box";
+import Text from "./text";
+
+export default function DetailItem({ data, children, border, ...props }) {
+  const type = (data?.ozelliklerListe &&
+    data.ozelliklerListe.map((_) => _.tam_adi)) || ["isim"];
+  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"
+        />
+      )}
+
+      {/* body */}
+      {data ? (
+        <Box>
+          <Box flexDirection="row">
+            <Text color="textAcik" ml={-14} mr={8}>
+              {data.anlam_sira}
+            </Text>
+            <Text color="red">{type.join(",")}</Text>
+          </Box>
+          <Box mt={8}>
+            <Text fontWeight="600">{data.anlam}</Text>
+            {data.orneklerListe &&
+              data.orneklerListe.map((ornek) => (
+                <Box key={ornek.ornek_id}>
+                  <Text ml={10} mt={12} color="textAcik" fontWeight="500">
+                    {ornek.ornek}{" "}
+                    <Text fontWeight="700">
+                      {ornek.yazar_id != "0" && "-" + ornek.yazar[0].tam_adi}
+                    </Text>
+                  </Text>
+                </Box>
+              ))}
+          </Box>
+        </Box>
+      ) : (
+        children
+      )}
+    </Box>
+  );
+}

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 { 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", {
+                    keyword: homeData?.kelime[0].madde,
+                  })
+                }
+              >
+                {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", {
+                    keyword: homeData?.atasoz[0].madde,
+                  })
+                }
+              >
+                <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>