reza added activation and Faq

navigation.js

@@ -16,7 +16,6 @@ import {useTranslation} from "react-i18next";
 import Profile from "./src/screens/Profile";
 import Videos from "./src/screens/Videos";
 import Exams from "./src/screens/Exams";
-import Activation from "./src/screens/Activation";
 
 const mapStateToProps = state => {
 	return {
@@ -43,8 +42,8 @@ function BottomTab(props) {
 			<Tab.Screen name={'Videos'} component={Videos} options={{
 				title: t('videos')
 			}} />
-			<Tab.Screen name={'Activation'} component={Activation} options={{
+			<Tab.Screen name={'Product'} component={Product} options={{
-				title: t('activation')
+				title: t('books')
 			}} />
 			<Tab.Screen name={'Home'} component={Home} options={{
 				title: t('home')

src/components/Header.js

@@ -9,7 +9,7 @@ export default function Header({icon, title, description, background}) {
   return (
     <View
       style={[
-        tw.style('w-full flex flex-col items-center justify-end pb-3 relative mb-4'),
+        tw.style('w-full flex flex-col items-center justify-end pb-3 relative mb-0'),
         {height: height / 4.5, backgroundColor: '#196EC015'},
       ]}>
       <Image source={background} style={[tw.style('absolute left-0 top-0'), {}]} />
@@ -17,7 +17,7 @@ export default function Header({icon, title, description, background}) {
       <Text
         style={[
           {fontSize: width / 18, color: '#196EC0'},
-          tw.style('font-semibold'),
+          tw.style('font-semibold mb-1'),
         ]}>
         {title}
       </Text>

src/components/Or.js

@@ -0,0 +1,20 @@
+import React, {useState} from 'react';
+import {View, Text, Dimensions} from 'react-native';
+import tw from 'tailwind-react-native-classnames';
+
+const width = Dimensions.get('window').width;
+
+function Or(props) {
+  return (
+    <View
+      style={[tw.style('w-full flex flex-row justify-between items-center mt-3 mb-5')]}>
+      <View
+        style={{width: '43%', height: 1, backgroundColor: '#EFEFEF'}}></View>
+      <Text style={{fontSize: width / 27, color: '#C2C2C2'}}>یا</Text>
+      <View
+        style={{width: '43%', height: 1, backgroundColor: '#EFEFEF'}}></View>
+    </View>
+  );
+}
+
+export default Or;

src/components/Pressable.js

@@ -14,7 +14,7 @@ export default function Pressable1({
   return (
     <Pressable
       style={[
-        tw.style('rounded-md py-3 flex flex-row justify-center mb-3'),
+        tw.style('rounded-md py-4 flex flex-row justify-center mb-3'),
         {
           backgroundColor: backgroundColor,
           borderWidth: border.width,

src/components/Search.js

@@ -24,7 +24,7 @@ const Search = ({
       color: '#000',
       borderWidth: 0.5,
       borderColor: '#DBDBDB',
-      paddingVertical: 10,
+      paddingVertical: 16,
       paddingHorizontal: 10,
       direction: direction,
       textAlign: textAlign,
@@ -40,7 +40,7 @@ const Search = ({
         placeholderTextColor={'#cccccc'}
         value={value}
       />
-      <Pressable style={tw.style('absolute left-3 top-0 transform inset-y-2')}>
+      <Pressable style={tw.style('absolute left-3 top-0 transform inset-y-4')}>
         <Image source={searchIcon} style={[{width: 20, height: 20}]} />
       </Pressable>
     </View>

src/screens/Activation/index.js

@@ -7,9 +7,12 @@ import {
   Text,
   Pressable,
   Image,
+  TextInput,
 } from 'react-native';
 import tw from 'tailwind-react-native-classnames';
 import Header from '../../components/Header';
+import CustomPressable from '../../components/Pressable';
+import Or from '../../components/Or';
 import bgQr from './assets/bgQr.png';
 import qrIcon from './assets/qr.png';
 import alertIcon from './assets/alert.png';
@@ -67,6 +70,34 @@ function Activation(props) {
             />
           </View>
         </Pressable>
+        <TextInput
+          placeholder="کد فعال‌سازی"
+          placeholderTextColor="#70707070"
+          style={[
+            tw.style('w-full mt-4 mb-3 rounded-md text-center py-4'),
+            {
+              backgroundColor: '#F9F9F9',
+              borderColor: '#DFDFDF',
+              borderWidth: 1,
+              fontSize: width / 27,
+            },
+          ]}
+        />
+        <CustomPressable
+          title={'تایید کد'}
+          backgroundColor="#196EC0"
+          color={'white'}
+          border={{color: '#196EC0', width: 0}}
+          width={'100%'}
+        />
+        <Or />
+        <CustomPressable
+          title={'فعالسازی با کد QR'}
+          backgroundColor="#98B2CB"
+          color={'white'}
+          border={{color: '#196EC0', width: 0}}
+          width={'100%'}
+        />
       </View>
     </ScrollView>
   );

src/screens/Faq/components/Instance.js

@@ -0,0 +1,60 @@
+import React, {useState} from 'react';
+import {View, Text, Dimensions, Image, Pressable} from 'react-native';
+import tw from 'tailwind-react-native-classnames';
+import minusIcon from '../assets/-.png';
+import plusIcon from '../assets/+.png';
+
+const width = Dimensions.get('window').width;
+
+function Instance(props) {
+  const [active, setActive] = useState(false);
+  return (
+    <Pressable
+      onPress={() => setActive(!active)}
+      style={[
+        tw.style('w-full flex flex-col my-1.5 rounded-md px-4 py-3'),
+        {
+          backgroundColor: !active ? '#F9F9F9' : '#F6F9FD',
+          borderColor: !active ? '#DBDBDB' : '#196EC0',
+          borderWidth: 1,
+        },
+      ]}>
+      <View
+        style={tw.style('flex flex-row-reverse justify-between items-center')}>
+        <Text
+          style={[
+            {
+              width: '90%',
+              textAlign: 'right',
+              color: '#196EC0',
+              fontSize: width / 27,
+            },
+            tw.style('font-medium'),
+          ]}>
+          نحوه خرید از سایت چگونه است ؟
+        </Text>
+        <Image
+          source={!active ? plusIcon : minusIcon}
+          style={{width: 14, height: 30}}
+        />
+      </View>
+      {active && (
+        <View style={tw.style('w-full flex flex-row-reverse pt-2')}>
+          <Text
+            style={[
+              {color: '#196EC0', fontSize: width / 30},
+              tw.style('inline text-right flex-1'),
+            ]}>
+            هر نفسی که فرو می‌ بریم، مرگی را که مدام به ما دستاندازی می‌کند پس
+            می‌زند... در نهایت این مرگ است که باید پیروز شود، زیرا از هنگام تولد
+            بخشی از سرنوشت ما شده و فقط مدت کوتاهی پیش از بلعیدن طعمه اش، با آن
+            بازی می کند. با این همه، ما تا آنجا که ممکن است، با علاقه فراوان و
+            دلواپسی
+          </Text>
+        </View>
+      )}
+    </Pressable>
+  );
+}
+
+export default Instance;

src/screens/Faq/index.js

@@ -0,0 +1,56 @@
+import React, {useState} from 'react';
+import {View, StyleSheet, Dimensions, ScrollView, Text} from 'react-native';
+import tw from 'tailwind-react-native-classnames';
+import Header from '../../components/Header';
+import Search from '../../components/Search';
+import Instance from './components/Instance';
+import bgFaq from './assets/bgFaq.png';
+
+const width = Dimensions.get('window').width;
+
+function Faq(props) {
+  const [search, setSearch] = useState('');
+  const onChange = (name, value) => {};
+
+  return (
+    <ScrollView
+      contentContainerStyle={styles.contentContainerStyle}
+      style={[tw.style('bg-white flex flex-col'), {width: width}]}>
+      <Header
+        background={bgFaq}
+        title={'پرسش‌های متداول'}
+        description={'تیم پشتیبانی ما اینجاست تا شما رو کمک کنه'}
+        // icon={}
+      />
+      <View style={styles.container}>
+        <Search
+          value={search}
+          onChange={setSearch}
+          placeholder={'بخشی از پرسش خود را اینجا بنویسید'}
+        />
+        <View style={tw.style('mt-2 w-full')}>
+        </View>
+        {[0,1,2,3,4].map((item, index) => (
+          <Instance key={index} />
+        ))}
+      </View>
+    </ScrollView>
+  );
+}
+
+// Later on in your styles..
+const styles = StyleSheet.create({
+  contentContainerStyle: {
+    paddingBottom: 50,
+    alignItems: 'flex-end',
+  },
+  container: {
+    width: Dimensions.get('window').width,
+    backgroundColor: 'white',
+    flexDirection: 'column',
+    paddingVertical: 5,
+    paddingHorizontal: 10,
+  },
+});
+
+export default Faq;