Im new to this framework, So this is the code:

                      import { StatusBar } from 'expo-status-bar';
                  import React from 'react';
                  import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
                  import { MainLogo } from '../../logos/mainLogo';
                  import { TextInput } from "react-native";

                  export function Home() {
                    return (
                      <SafeAreaView>
                        <View style={styles.firstBackGround}>
                          <MainLogo/>
                          <Text style={{fontSize:25,fontWeight:'bold',color:'rgb(108, 
                        150, 232)',}}>LIBRARY</Text>
                        </View>
                        <TextInput placeholder='Search Song or Artist' style= 
                        {styles.secondBackGround} placeholderTextColor="#6b7eb1" > 
                        </TextInput>
                        <Text style={styles.recommendedText}>Recommended</Text>
                    
                      </SafeAreaView>
                    );
                  }

                  const styles = StyleSheet.create(
                    {

                    container: {  
                      
                    },
                    firstBackGround: {
                      flexDirection:'row',
                      alignItems:'center',
                      flex:0,
                    },
                    secondBackGround:{
                      backgroundColor: '#3f4d7e',
                      width:'83%',
                      marginTop:10,
                      height:'17%',
                      borderRadius:20,
                      flex:0,
                      marginLeft:'auto',
                      marginRight:'auto',
                      paddingLeft: 20,
                    },
                    recommendedText:{
                      fontSize:17,
                      flex:0,
                      flexDirection:'row',
                      fontWeight:'bold',
                      color:'rgb(108, 150, 232)',
                      marginLeft:20,
                      marginTop:100,
                    }
                    
                  });

here is the image of result:

the more i increase the top margin for recommended text, it auto changes the input field height. I solved this problem by mistake between First View and text input but i cant do it again between text input and Text(recommended)

CodePudding user response：

the height is increasing because you gave it in % and also flex:0 has no impact.

use like this

import React from 'react';
import { Dimensions, SafeAreaView, StyleSheet, Text, View } from 'react-native';
import { TextInput } from "react-native";
const { width } = Dimensions.get('window')
export default function SettingsScreen() {
    return (
        <SafeAreaView style={{ flex: 1 }}>
            <View style={styles.firstBackGround}>
                <Text style={{ fontSize: 25, fontWeight: 'bold', color: 'rgb(108,150, 232)', }}>LIBRARY</Text>
            </View>
            <TextInput placeholder='Search Song or Artist' style={styles.secondBackGround} placeholderTextColor="#6b7eb1" />

            <Text style={styles.recommendedText}>Recommended</Text>

        </SafeAreaView>
    );
}

const styles = StyleSheet.create(
    {

        container: {

        },
        firstBackGround: {
            flexDirection: 'row',
            alignItems: 'center',
            flex: 0,
        },
        secondBackGround: {
            backgroundColor: '#3f4d7e',
            width: '83%',
            marginTop: 10,
            // height: '17%',
            height: width / 7.5,
            borderRadius: 20,
            // flex: 0,
            marginLeft: 'auto',
            marginRight: 'auto',
            paddingLeft: 20,
        },
        recommendedText: {
            fontSize: 17,
            // flex: 0,
            flexDirection: 'row',
            fontWeight: 'bold',
            color: 'rgb(108, 150, 232)',
            marginLeft: 20,
            marginTop: 200,
            backgroundColor: 'red'
        }

    });

if you want to make design responsive then

step:1 - get a scale of figma or xd screen (eg 375 width)

step:2 -say your height of a view is 50 then divide 375/50 = 7.5

step:3 - use height width/7.5 ( width of your current window, get this by using Dimensions API)

another way is use this library react-native-size-matters