React & React Native

React Native

Basics

1. Core Components
2. Styling

• FlexBox -- Elements are positioned inside of containers

3. Interactivity

• import { useState } from 'react'
  // useState hook to get users' every keystroke
  export default function App() {
    const [Text, setText] = useState('')
    const inputHandler = () => {}
    return <View style={styles.appContainer} />
  }
  
  const styles = StyleSheet.create({
    appContainer: {},
  })
  

4. ScrollView Component
5. FlatList Component

• <FlatList
    data={courseGoals}
    renderItem={(itemData) => {
      return (
        <View style={styles.goalItem}>
          <Text style={styles.goalText}>
            {itemData.item.text}
          </Text>
        </View>
      )
    }}
    keyExtractor={(item, index) => {
      return item.id
    }}
    alwaysBounceVertical={false}
  />
  

6. Splitting Components

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

7. Props Passing
8. State Bind Input Value Property
9. Pressable Component (Children)

• <Pressable onPress={props.onDeleteItem.bind(this, props.id)}></Pressable>
  

• In the App Component (Parent)

• const handleDelete(id) {
    setGoals((currentGoals) => {
      return currentGoals.filter(goal =>
        goal.id !== id
      );
    })
  }
  //...
  <GoalItem
    text={itemData.item.text}
    id={itemData.item.id}
    onDeleteItem={handleDelete}
  ></GoalItem>
  

10. Android Ripple Effect & IOS Alternative

• <Pressable
      android_ripple={{color: 'red'}}
      style={({pressed}) => pressed && styles.pressedItem}
      onPress={props.onDeleteItem.bind(this, props.id)
  ></Pressable>
  

11. Adding a Modal Screen

•   import { Modal } from 'react-native'
  

• 2 Props in Modal Component

•   <Modal visible={props.visible} animationType="slide"></Modal>
  

12. Image Component

•   import { Image } from 'react-native'
    <Image
      style={styles.image}
      // relative path
      source={require('../assets/images/goals.png')}/>
  

13. Status Bar

•   import { StatusBar } from 'expo-status-bar'
    <StatusBar style="light" />
  

Advance

1. React Native use Hermes engine(instead of JavaScript Core) to improve its performance on Andriod.
2. Expo -- It is a framework which makes React Native Development simple

• Sign up an Expo account
• Create a Expo snack
• Coding logic

3. Folder Structure

• App.js
• src
  • utils
  • features -- entry point for the features that I want to build
  • components

4. SafeAreaView Component
5. Platform and StatusBar Component

•   StyleSheet.create({
        container: {
            flex:1,
            paddingTop: Platform.OS === 'android'?
                StatusBar.currentHeight : 0;
        }
    })
  

6. React Native Paper

• Check the latest version and update it in package.json

7. Storing A Subject

• Think about: How can I store user input in R.N? 🤔️
• Use shorthand

•   import { TextInput } from 'react-native-paper';
    //...
    const [subject, setSubject] = useState(null);
    //... onChangeText={setSubject} is a shorthand of
    //... onChangeText={(val)=>setSubject(val)}
    <TextInput
        onChangeText={setSubject}
        label="Please Input"
    />
  

8. Custom Components import from components folder
9. Child Event to Parent Component

• Parent Component: App

•   const [currentSubject,setCurrentSubject] = useState(null);
    //...
    return (
        {!currentSubject ?
            <Focus addSubject={setCurrentSubject}/> :
            <View><Text>Other Page</Text></View>
        }
    )
  

• Child Component: <Focus />

•   const Focus = ({addSubject}) => {
        //...
        return (
            <RoundedButton onPress={()=>{addSubject(subject)}}/>
        )
    }
  

10. useState VS useRef

• useState will cause a re-render
• useRef will not
  • only return one object in which I can set it to what variable I want.
  • Track the value of setInterval

11. useEffect

• only execute once for the 1st moment

•   useEffect(()=>{console.log('Effect Running')}, []);
  

• 1st moment and every enteredPassword state update will run it

•   useEffect( ()=>{console.log('Effect Running')}, [enteredPassword]);
  

• Clean up function will run every 2nd time component re-executed based on the enteredPassword state change. And this clean up function will run before the effect function run.
• Clean up function will also run when the component is removed.

•   useEffect( ()=>{console.log('Effect Running') return ()=>{console.log('Clean Up')} }, [enteredPassword])
  

12. CountDown Function Component

• Think about how do create this component? 🤔️

13. ProgressBar

• Import from react native paper
• progress prop in this component
• Hook up the value by using useState

  const [progress, setProgress] = useState(1);
  //...
  <Progress progress={progress}/>

• Think about the fallback function in CountDown component 🤔️

  <CountDown onProgress={(prog)=>setProgress(prog)}/>

• shorthand writting (get value & set value) in callback function

  <CountDown onProgress={setProgress}/>

14. Vibration

• import from 'react-native'

15. Pass a function as a parameter to component's prop
16. useKeepAwake hook imported from 'expo-keep-awake'
17. FlatList

• data ={}
• renterItem ={}
• keyExtractor ={}

Local Setup

1. Expo export
2. Git
3. Node.js
4. Yarn or npm
5. Yarn is more reliable with React Native project since they all developed by FB
6. cd project folder and run
   • yarn
   • sudo npm install -g expo-cli
   • cat package.json
   • yarn ios
7. Xcode
   • (Applications --> Xcode --> Contents --> Developer --> Applications --> Simulator)
8. Android Studio
9. VS code
10. Key chain management
11. Imposter syndrome --> sometime is good for learning 🤔️