Reac native SQLite_Practice

 App.js

import React from 'react';
import {View, Text, StyleSheet, Pressable} from 'react-native';
import {createStackNavigator} from '@react-navigation/stack';
import {NavigationContainer} from '@react-navigation/native';
import ScreenA from './Components/ScreenA';
import Login from './Components/Login';

const Stack = createStackNavigator();

// const ScreenA = ({navigation}) => {
//   return (
//     <View style={Styles.container}>
//       <Text style={Styles.txt}>ScreenA</Text>
//       <Pressable style={({pressed})=>({backgroundColor:pressed ?'#ffffffff':'#ff5',
//       borderWidth:5,borderRadius:30})}
//       onPress={()=>navigation.navigate('ScreenB')}>
//         <Text style={Styles.txt}>Go To ScreenB</Text>
//       </Pressable>
//     </View>
//   );
// };
// const ScreenB = () => {
//   return (
//     <View style={Styles.container}>
//       <Text style={Styles.txt}>ScreenB</Text>
//     </View>
//   );
// };

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{header: () => null}}>
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen name="ScreenA" component={ScreenA} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

const Styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  txt: {
    fontSize: 50,
    marginBottom: 20,
  },
});
export default App;
******************************************************************
login
index.js
import React, { useState, useEffect } from 'react';
import { View, Text, Image, Pressable, Alert } from 'react-native';
// import AsyncStorage from '@react-native-async-storage/async-storage';
import SQLite from 'react-native-sqlite-storage';
import { TextInput } from 'react-native-gesture-handler';
import styles from './styles';
const db = SQLite.openDatabase(
  {
    name: 'MainDB',
    location: 'default',
  },
  () => {},
  error => {
    console.log(error);
  },
);
const Login = ({ navigation }) => {
  const [Name, setName] = useState('');
  const [age, setage] = useState('');
  useEffect(() => {
    CreateTable();
    GetData();
  }, []);
  const CreateTable = () => {
    db.transaction(tx => {
      tx.executeSql(
        'CREATE TABLE IF NOT EXISTS' +
        'Users' +
        '(ID INTEGER PRIMARY KEY AUTOINCREMENT, Name TEXT, Age INTEGER );',
      );
    });
  };

  GetData = () => {
    try {
      db.transaction(tx => {
        tx.executeSql('SELECT Name,age FROM Users', [], (tx, results) => {
          var len = results.rows.length;
          if (len > 0) {
            navigation.navigate('ScreenA');
          }
        });
      });
    } catch (error) {
      // Error retrieving data
      console.log(error);
    }
  };
  const checkData = async () => {
    if (Name.length == 0 || age.length == 0) {
      Alert.alert('warning', 'please enter value');
    } else {
      try {
        // user = {
        //   age: age,
        //   Name: Name,
        // };
        // await AsyncStorage.setItem('userData', JSON.stringify(user));
        await db.transaction(async tx => {
          await tx.executeSql(
            "INSERT INTO Users (Name,age) VALUES ('" + Name + "'," + age + ')',
          );
          // await tx.executeSql('INSERT INTO Users (Name,age) VALUES (?,?)'), [
          //   Name,
          //   age,
          // ];
        });
        navigation.navigate('ScreenA');
      } catch (error) {
        // Error saving data
        console.log(error);
      }
    }
  };
  return (
    <View style={styles.container}>
      <View style={styles.imgView}>
        <Image style={styles.img} source={require('../../assets/logo.png')} />
      </View>
      <View style={styles.inputView}>
        <TextInput
          style={styles.input}
          placeholder="Enter txt"
          onChangeText={value => setName(value)}
        />
      </View>
      <View style={styles.inputView}>
        <TextInput
          style={styles.input}
          placeholder="Enter age"
          onChangeText={value => setage(value)}
        />
      </View>

      <Pressable style={styles.pressable} onPress={() => checkData()}>
        <Text style={styles.presTxt}>Login</Text>
      </Pressable>
    </View>
  );
};

export default Login;
login
styles.js
import {StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  container: {

    flex: 1,
    backgroundColor: '#4167ab',
  },
  txt: {
    fontSize: 20,
  },
  img:{
     
      height:200,
      width:280,
     
  },
  imgView:{
      alignSelf:'center'
  },
  inputView:{
      alignSelf:'center'
  },
  input:{
      backgroundColor:'skyblue',
      width:290,
      height:60,
      fontSize:30,
      textAlign:'center',
      borderRadius:20
  },
  pressable:{
      marginTop:20,
      backgroundColor:'green',
      alignSelf:'center',
      height:50,
      width:100,
      borderRadius:10
  },
  presTxt:{
      textAlign:'center',
      fontSize:30
  }
});

export default styles;
****************************************************************
screenA
index.js
import React, {useState, useEffect} from 'react';
import {View, Text, Pressable, Alert} from 'react-native';
// import AsyncStorage from '@react-native-async-storage/async-storage';
import SQLite from 'react-native-sqlite-storage';
import Styles from './style';
import {TextInput} from 'react-native-gesture-handler';
const db = SQLite.openDatabase(
  {
    name: 'MainDB',
    location: 'default',
  },
  () => {
    console.log('screenA database created');
  },
  error => {
    console.log(error);
  },
);

const ScreenA = ({navigation}) => {
  const [name, setName] = useState('');
  const [age, setage] = useState('');
  useEffect(() => {
    GetData();
  }, []);
  const UpdateData = async () => {
    if (name.length == 0) {
      Alert.alert('warning', 'please enter value');
    } else {
      try {
        user = {
          Name: name,
        };
        await AsyncStorage.mergeItem('userData', JSON.stringify(user));
        Alert.alert('massege', 'your data succesfully updated');
      } catch (error) {
        // Error saving data
        console.log(error);
      }
    }
  };
  const RemoveData = async () => {
    try {
      // await AsyncStorage.removeItem('key');
      await AsyncStorage.clear(); //it does not need key it is delete all keys
      navigation.navigate('Login');
    } catch (error) {
      // Error saving data
      console.log(error);
    }
  };

  GetData = () => {
    try {
      // await AsyncStorage.getItem('userData').then(value => {
      //   if (value != null) {
      //     let user = JSON.parse(value);
      //     setName(user.Name);
      //     setage(user.age);
      //   }
      // });
      //*************************SQLite */
      db.transaction(tx => {
        tx.executeSql('SELECT Name,age FROM Users', [], (results) => {
          var len = results.rows.length;
          console.log(results);
          if (len > 0) {
            var userName = results.rows.item(0).Name;
            var userAge = results.rows.item(0).age;

            setName(userName);
            setage(userAge);
          }
        });
      });
    } catch (error) {
      // Error retrieving data
      console.log(error);
    }
  };

  return (
    <View style={Styles.container}>
      <Text style={Styles.txt}>Name:{name}</Text>
      <Text style={Styles.txt}>Age:{age}</Text>
      <View style={Styles.inputView}>
        <TextInput
          style={Styles.input}
          placeholder="enter text"
          value={name}
          onChangeText={val => setName(val)}
        />
      </View>
      <Pressable
        style={({pressed}) => ({
          backgroundColor: pressed ? '#ffffffff' : '#ff5',
          borderWidth: 5,
          borderRadius: 30,
        })}
        onPress={() => UpdateData()}>
        <Text style={Styles.txt}>Update</Text>
      </Pressable>
      <Pressable
        style={({pressed}) => ({
          backgroundColor: pressed ? 'brown' : 'green',
          borderWidth: 5,
          borderRadius: 30,
        })}
        onPress={() => RemoveData()}>
        <Text style={Styles.txt}>remove</Text>
      </Pressable>
    </View>
  );
};

export default ScreenA;

screenA
styles.js
import { StyleSheet } from "react-native";

const Styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    },
    txt: {
      fontSize: 50,
      marginBottom: 20,
    },
    inputView:{
      alignSelf:'center',

    },
    input:{
      borderWidth:3,
      width:250,
      borderRadius:20,
      textAlign:'center',
      fontSize:30
    }
  });
  export default Styles;
**********************************************************************
package.json
  "dependencies": {
    "@react-native-async-storage/async-storage": "^1.15.8",
    "@react-native-masked-view/masked-view": "^0.2.6",
    "@react-navigation/native": "^6.0.2",
    "@react-navigation/stack": "^6.0.7",
    "react": "17.0.2",
    "react-native": "0.65.1",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.7.2",
    "react-native-sqlite-storage": "^5.0.0"
  },

Comments

Post a Comment

Popular posts from this blog

Privacy Policy for Live Weather Forecast - Realtime app

  Privacy Policy SMA Creative Studio built the Live Weather Forecast - Realtime app as a Free app. This SERVICE is provided by SMA Creative Studio at no cost and is intended for use as is. This page is used to inform visitors regarding my policies with the collection, use, and disclosure of Personal Information if anyone decided to use my Service. If you choose to use my Service, then you agree to the collection and use of information in relation to this policy. The Personal Information that I collect is used for providing and improving the Service. I will not use or share your information with anyone except as described in this Privacy Policy. The terms used in this Privacy Policy have the same meanings as in our Terms and Conditions, which are accessible at Live Weather Forecast - Realtime unless otherwise defined in this Privacy Policy. Information Collection and Use For a better experience, while using our Service, I may require you to provide us with certain personally identif...
Read more

NFC Checker App Privacy Policy

  Privacy Policy SMA Creative Studio built the NFC Checker app as a Free app. This SERVICE is provided by SMA Creative Studio at no cost and is intended for use as is. This page is used to inform visitors regarding my policies with the collection, use, and disclosure of Personal Information if anyone decided to use my Service. If you choose to use my Service, then you agree to the collection and use of information in relation to this policy. The Personal Information that I collect is used for providing and improving the Service. I will not use or share your information with anyone except as described in this Privacy Policy. The terms used in this Privacy Policy have the same meanings as in our Terms and Conditions, which are accessible at NFC Checker unless otherwise defined in this Privacy Policy. Information Collection and Use For a better experience, while using our Service, I may require you to provide us with certain personally identifiable information. The information that I ...
Read more

FlatList

 app.js import React , { useState } from 'react' ; import {   StyleSheet ,   View ,   Text ,   ScrollView ,   Platform ,   SafeAreaView ,   FlatList ,   TouchableOpacity , } from 'react-native' ; const App = () => {   const items = [     { id: 1 , name: 'imran' , age: 32 },     { id: 2 , name: 'kamran' , age: 22 },     { id: 3 , name: 'jabeel' , age: 14 },     { id: 4 , name: 'code' , age: 44 },     { id: 5 , name: 'with' , age: 78 },     { id: 6 , name: 'harry' , age: 32 },     { id: 7 , name: 'hellos' , age: 31 },     { id: 8 , name: 'majid' , age: 29 },     { id: 9 , name: 'sher' , age: 24 },     { id: 10 , name: 'muhammad' , age: 22 },     { id: 11 , name: 'asnari' , age: 32 },     { id: 12 , name: 'kamran' , age: 22 },     { id: 13 , name: 'jabeel' , age...
Read more