React Native
  • Initial page
  • Set-up
    • Prepare the environment
    • ESLint
    • Debugger
  • Introduction
    • React v.s. React Native
    • Project Tree & Script Structure
  • Component & Props
    • What is Props
    • What is Compoent
      • Axios and Component State
      • Class-base components
      • Example
        • Activity Indicator
        • Rendering Large list
        • Card
  • Styling
    • What is Styling
    • Primitive elements
    • Flexbox
      • justifyContent
      • flexDirection
    • More on styling
    • Alignment & Touchable Item
  • Redux
    • What is Redux
    • What is Reducer
  • React-thunk
    • Untitled
  • Build & Release
    • Untitled
Powered by GitBook
On this page

Was this helpful?

  1. Styling

More on styling

const styles = {
  //  return JSON Object, used to define the CSS Style
  textStyle: {
    // textStyle is the properties
    fontSize: 20
  },
  viewStyle:{
      backgroundColor:'#F8F8F8',
      justifyContent: 'center',      
      alignItems: 'center',
      height:60,
      paddingTop: 15,
      // Shadow Related config
      shadowColor: '#000',
      shadowOffset: {
        width:0,
        height:2
      },
      shadowOpacity: 0.2, // darkness of shadow
      // 
      elevation:2,
      position:'relative'
      
  }
};
PreviousflexDirectionNextAlignment & Touchable Item

Last updated 6 years ago

Was this helpful?