How to accomplish the rounded upper background component in React Native?-CodePudding

In one of my side projects that uses React Native, I am trying to make a fancy UI for the profile page. I would like to make a customizable upper half background component like the one by Soft-UI by Creative Tim, but I am not very sure what's the best way go for it.

Here is a snapshot of what I am trying to accomplish. Soft-UI profile page

Any help would be greatly appreciated.

CodePudding user response：

Heres a full example I made of what you want (https://snack.expo.dev/@heytony01/curious-apples). I explain what I did below.

The key is to understand flex box and position absolute.Good place to learn flex box is (https://flexboxfroggy.com/) . Read documentation for postion absolute (https://reactnative.dev/docs/layout-props)

First use flex box to get one view to cover the bottom 2/3 of the screen and the top screen to cover the top 1/3 of the screen

<View style={{flex:1}}>

         {/* Top  1/3*/}
        <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
        
        </View>

        {/* Bottom  2/3*/}
       <View style={{flex:2,justifyContent:"center",alignItems:"center"}}>

      </View>

</View>

Next make top user profile component

<View style={{flex:1}}>

         {/* Top  1/3*/}
        <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
           
          {/* Purple card*/}
           <View style={{
            width:"90%",
            height:"90%",
            backgroundColor:"purple",
            borderRadius:"5%",
            justifyContent:"center",
            alignItems:"center",
            fontSize:10
            }}>
              
            </View>
        
        </View>

        {/* Bottom  2/3*/}
        
       <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>

      </View>
</View>

Next make the follower bar position absolute so you can overlay over the other view

<View style={{flex:1}}>

         {/* Top  1/3*/}
        <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
           
          {/* Purple card*/}
           <View style={{
            width:"90%",
            height:"90%",
            backgroundColor:"purple",
            borderRadius:"5%",
            justifyContent:"center",
            alignItems:"center",
            fontSize:10
            }}>
              
            </View>

           {/* Postion absloute bar*/}
           <View style={{
           zIndex:99, // Puts it above the other view
           position:"absolute",
           flexDirection:"row",
           bottom:-5,
        
           width:"70%",
           height:"20%",
           backgroundColor:"lightgray",
           borderRadius:10}}>
              
           </View>
        
        </View>

        {/* Bottom  2/3*/}
        
       <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
    
       </View>
      
</View>

CodePudding user response：

UI Kitten is the best way to achieve fancy UIs in React Native: https://akveo.github.io/react-native-ui-kitten/docs/guides/getting-started#getting-started

Although this UI at the top looks like just a simple rounded card with a linear gradient as the background color