CODEWITHSUNDEEP
react-nativepercentage
Ketan Patel
Ketan Patel

Reputation: 2215

View over another view in percentage of screen width

I am new in react native and i want a view like attached image. I have no idea that how can achieved this..?

enter image description here

I have tried this:

app.js

            <View style={styles.navSectionStyle}>

              <TouchableOpacity
                  style={styles.SubmitButtonStyle}
                  activeOpacity = { .5 }
                  onPress={ this.ButtonClickCheckFunction }>

               <Text style={styles.TextStyle}> Page 1 </Text>

             </TouchableOpacity>

                <View style={styles.BackStyle}>

                <Text style={styles.TextStyle}> Test</Text>

                </View>

            </View>

style.js

    SubmitButtonStyle: {

        width:'70%', 
        height: 80 ,
        justifyContent: 'center', 
        alignItems: 'center',

        paddingTop:15,
        paddingBottom:15,

        backgroundColor:'#fff',
        borderRadius:10,
        borderWidth: 2,
        borderColor: '#fff'
      },

      BackStyle:{
      marginTop:10,
      marginLeft:15,
      position: 'absolute',
      width: 30,
      borderRadius:10,
      borderWidth: 1,
      borderColor: '#F53BBB',
      backgroundColor: '#F53BBB',
      justifyContent: 'center', 
      alignItems: 'center',
      shadowColor: '#000000',
        shadowOffset: {
          width: 2,
          height: 3
        },
        shadowRadius: 4,
        shadowOpacity: 1.0
      },

      TextStyle:{
      justifyContent: 'center', 
      alignItems: 'center'

}

Upvotes: 1

Views: 491

Answers (1)

Pritish Vaidya
Pritish Vaidya

Reputation: 22209

Here's a basic template for the View

Get the Width of the screens using Dimensions api.

Mark the views as position: absolute and get position them according to the screen width.

15 % from both sides, 10% for overlapping view and 60% for the main view

render() {
return (
 <View style={{flex: 1,
       alignItems: 'center',
       justifyContent: 'center',
       backgroundColor: 'red'}}>
   <View style={{width: Dimensions.get('window').width * 0.6,
                 height: 100,
                 backgroundColor: 'blue'}}/>
   <View style={{position: 'absolute',
                 width: Dimensions.get('window').width * 0.1,
                 height: 80,
                 backgroundColor: 'black',
                 left: Dimensions.get('window').width * 0.15,
                 zIndex: 1}} />
   <View style={{position: 'absolute',
                 width: Dimensions.get('window').width * 0.1,
                 height: 80,
                 backgroundColor: 'black', 
                 right:  Dimensions.get('window').width * 0.15,
                 zIndex: 1}} />
 </View>
 )
}

Upvotes: 1

Related Questions