React Native Research By Salman Ghouri

 React Native Research By Salman Ghouri

•  States:

import React, {useState} from 'react';

import { StatusBar } from 'expo-status-bar';

import { StyleSheet, Text, View } from 'react-native';

export default function App() {

  const [name, setName] = useState('salo')

  return (

    <View style={styles.container}>

      <Text>hi my name is {name}</Text>

<Button title='Youtubesa' onPress={()=>{Linking.openURL('https://www.google.com/')} }/>

      <StatusBar style="auto" />

    </View>

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    justifyContent: 'center',

  },

});

State Controls

  1: const [name, setName] = useState('salo')

  const [session, setSession]  = useState({number:6,title:'state'})

  const onClickHandler = () => {

    setName('Programming With ali')

    setSession({number:9,title:'hacker'})

  }

  return (

    <View style={styles.container}>

      <Text>{name}</Text>

      <Text>this is my number {session.number} & about is {session.title}</Text>

     <Button title='Update State' onPress={onClickHandler}></Button>

     

    </View>

  );

Style Component:

 body:{

    flex:1,

    backgroundColor:'#fff',

    alignItems:'center',

    justifyContent:'center',

    borderWidth:10,

    borderColor:'red',

    borderRadius:10,

  },

  text:{

    fontStyle:'italic',

    color:'red',

    fontSize:20,

    margin:10,

  }

LInk:https://reactnative.dev/docs/components-and-apis

List, Scrollview & Refresh Control:

import React, { useState } from 'react';

import {

  StyleSheet,

  View,

  Text,

  ScrollView,

  RefreshControl,

} from 'react-native';

const App = () => {

  const [Items, setItems] = useState([

    { key: 1, item: 'Item 1' },

    { key: 2, item: 'Item 2' },

    { key: 3, item: 'Item 3' },

    { key: 4, item: 'Item 4' },

    { key: 5, item: 'Item 5' },

    { key: 6, item: 'Item 6' },

    { key: 7, item: 'Item 7' },

    { key: 8, item: 'Item 8' },

    { key: 44, item: 'Item 9' },

    { key: 68, item: 'Item 27' },

    { key: 0, item: 'Item 78' },

  ]);

  const [Refreshing, setRefreshing] = useState(false);

  const onRefresh = () => {

    setRefreshing(true);

    setItems([...Items, { key: 69, item: 'Item 69' }]);

    setRefreshing(false);

  }

  return (

    <ScrollView

      style={styles.body}

      refreshControl={

        <RefreshControl

          refreshing={Refreshing}

          onRefresh={onRefresh}

          colors={['#ff00ff']}

        />

      }

    >

      {

        Items.map((object) => {

          return (

            <View style={styles.item} key={object.key}>

              <Text style={styles.text}>{object.item}</Text>

            </View>

          )

        })

      }

    </ScrollView>

  );

};

const styles = StyleSheet.create({

  body: {

    flex: 1,

    flexDirection: 'column',

    backgroundColor: '#ffffff',

  },

  item: {

    margin: 10,

    backgroundColor: '#4ae1fa',

    justifyContent: 'center',

    alignItems: 'center',

  },

  text: {

    color: '#000000',

    fontSize: 45,

    fontStyle: 'italic',

    margin: 10,

  },

});

export default App;

Flarlist & SectionList with Nested Array

import React, { useState } from 'react';

import {

  StyleSheet,

  View,

  Text,

  ScrollView,

  RefreshControl,

  FlatList,

  SectionList,

} from 'react-native';

const App = () => {

  const [Items, setItems] = useState([

    { name: 'Item 1' },

    { name: 'Item 2' },

    { name: 'Item 3' },

    { name: 'Item 4' },

    { name: 'Item 5' },

    { name: 'Item 6' },

    { name: 'Item 7' },

    { name: 'Item 8' },

    { name: 'Item 9' },

    { name: 'Item 27' },

    { name: 'Item 78' },

  ]);

  const DATA = [

    {

      title: 'Title 1',

      data: ['Item 1-1', 'Item 1-2', 'Item 1-3'],

    },

    {

      title: 'Title 2',

      data: ['Item 2-1', 'Item 2-2', 'Item 2-3'],

    },

    {

      title: 'Title 3',

      data: ['Item 3-1'],

    },

    {

      title: 'Title 4',

      data: ['Item 4-1', 'Item 4-2'],

    },

  ]

  const [Refreshing, setRefreshing] = useState(false);

  const onRefresh = () => {

    setRefreshing(true);

    setItems([...Items, { name: 'Item 69' }]);

    setRefreshing(false);

  }

  return (

    <SectionList

      keyExtractor={(item, index) => index.toString()}

      sections={DATA}

      renderItem={({ item }) => (

        <Text style={styles.text}>{item}</Text>

      )}

      renderSectionHeader={({section})=>(

        <View style={styles.item}>

          <Text style={styles.text}>{section.title}</Text>

        </View>

      )}

    />

    // <FlatList

    //   keyExtractor={(item, index) => index.toString()}

    //   data={Items}

    //   renderItem={({ item }) => (

    //     <View style={styles.item}>

    //       <Text style={styles.text}>{item.name}</Text>

    //     </View>

    //   )}

    //   refreshControl={

    //     <RefreshControl

    //       refreshing={Refreshing}

    //       onRefresh={onRefresh}

    //       colors={['#ff00ff']}

    //     />

    //   }

    // />

    // <ScrollView

    //   style={styles.body}

    //   refreshControl={

    //     <RefreshControl

    //       refreshing={Refreshing}

    //       onRefresh={onRefresh}

    //       colors={['#ff00ff']}

    //     />

    //   }

    // >

    //   {

    //     Items.map((object) => {

    //       return (

    //         <View style={styles.item} key={object.key}>

    //           <Text style={styles.text}>{object.item}</Text>

    //         </View>

    //       )

    //     })

    //   }

    // </ScrollView>

  );

};

const styles = StyleSheet.create({

  body: {

    flex: 1,

    flexDirection: 'column',

    backgroundColor: '#ffffff',

  },

  item: {

    margin: 10,

    backgroundColor: '#4ae1fa',

    justifyContent: 'center',

    alignItems: 'center',

  },

  text: {

    color: '#000000',

    fontSize: 45,

    fontStyle: 'italic',

    margin: 10,

  },

});

export default App;

Text Input & Keyboard:

Browse More Articles

Tweet

Written by Ghouri Admin

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.