Mobile Development - Lecture 12

 

Mobile Development- Using React Native - Lecture 12

Lecture Outcome:

At the end of the lecture, students will be able to know about

• Introduction to RN and libraries

# RN HOW KNOW?

View are the divs
style props are the CSS
CSS outline (OUTLINE STYLING) 
couple of other builtin UI COMPONENTS (IMAGE)


# SCREEN
    => width + height  = "100%"

FLEX => number system    5 ( we can do design responsive divisions)
 FLEX ALSO HLEPS US IN DIRECTIONS


 SOME REUSEABLE COMPONENTS are next


 HELPER UI LIBS


 https://wix.github.io/react-native-ui-lib/docs/components/basic/Button

 https://reactnativeelements.com/docs/components/button

FLEX EXAMPLES.js


import {View,Button,StyleSheet} from "react-native";

export default function App() {

  return (
    <View style={styles.mainContainer}>
      <View style={styles.childOne}/>
      <View style={styles.childTwo}/>
      <View style={styles.childThree}/>
    </View>
  );
}


const styles = StyleSheet.create({
  mainContainer:{
    flex:1,
    backgroundColor:'black',
    flexDirection: "row"
  },

  childOne:{
    flex:1,
    backgroundColor:"orange"
  },
  childTwo:{
    flex:1,
    backgroundColor:"pink"
  },
  childThree:{
    flex:1,
    backgroundColor:"red"
  },
})