Search code examples
scrollreact-nativeplaceholdertextinput

Text input placeholder going down in react native

In my react native app when I press the text input the placeholder is going down a little bit as shown in the image below. how can we fix this? a simple touch and scroll on screen making this change. with or without scrollview its not working

enter image description here

> below is my code
           <ScrollView>
          <View style={styles.Seventh}>
            <View style={styles.Eighth}>
              <Image style={styles.Imagethird} source={require('../src/Assets/Profile-xhdpi.png')} />
            </View>
            <View style={styles.ninth}>
              <Text style={styles.Textthird}>USER'S NAME</Text>
              <TextInput placeholder="user's name               " style={styles.one} underlineColorAndroid='transparent'
            //--------------value Handler----------------//
            onChangeText={(firstName) => this.setState({firstName})}

            //---------------------------------//
              />
            </View>
            </View>
            </ScrollView>
            Seventh: {
                height: 60,
                width: '100%',
                borderRadius: 70,
                flexDirection: 'row',
                elevation: 3,
                backgroundColor: 'white',
                marginTop:10
            },
            Eighth: {
                height: 60,
                width: '20%',
                justifyContent: 'center',
                alignItems: 'center'
            },
            Imagethird: {
                height: 20,
                width: 20,
                resizeMode: 'contain',
            },
            ninth: {
                height: 60,
                width: '80%',

            },
            Textthird: {
                marginRight:29,
                marginTop: 10,
                fontSize: 12,
                color: '#C7C7CD'
            },one:{
        marginBottom:25,
        fontWeight:'bold',
     }


  [1]: https://i.sstatic.net/Cq2wx.png
Solution

  • i think the problem is in margin .. i had this problem also ,and found that text input has a default margin value , try set margin to 0,

    
<TextInput style={{margin:0,padding:0}} placeholder="place holder"/>