Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React native TextInput

I'm starting to learn react native, therefore I'm following the documentation, however, I can not test the TextInput, I copy past the example from the official documentation but nothing appears in my app.
I also remarked that when I add other components they doesn't appears also, however, when I remove the TextInput they appears as expected.
I searched online for some solution, I find a lot, but non works for me ( mostly the talked about the height of the component...).
also there is no error neither in the app nor in the debugger-gui
does anybody have a solution?
Edit1
to get started with react I followed the instructions and create AwsomeProject, then in the app.js (I also tried to create a separte component and call it in app.js) I added this code :

   <View style={{ backgroundColor: 'red' }}>
    <TextInput style={{ backgroundColor: '#ededed', height: 60 }} value={'Hello'} />
  </View>
like image 385
aName Avatar asked Aug 09 '26 22:08

aName


2 Answers

It's hard to know without a code example but are you importing TextInput at the top of the file?

import { TextInput } from 'react-native';
like image 199
Cathal Mac Donnacha Avatar answered Aug 12 '26 12:08

Cathal Mac Donnacha


I think by adding flex:1 and onChangeText in the textInput will solve the issue

import * as React from 'react';
import {View, TextInput,Button} from 'react-native';

export default class App extends React.Component {
  state={
    text:"Hello"
  }
  render() {
    return (
        <View style={{ backgroundColor: 'red',flex:1,justifyContent:'center'}}>
          <TextInput style={{ backgroundColor: 'red', height: 60,width:300 ,borderWidth:1,borderColor:"white"}} value={this.state.text} onChangeText={(text) => this.setState({text})}/>
          <Button
           title="Learn More"
           color="#841584"
           accessibilityLabel="Learn more about this purple button"
          />
        </View>
    );
  }
}
like image 37
Rajesh Bhartia Avatar answered Aug 12 '26 12:08

Rajesh Bhartia