Below is my setup for auto inserting text into a TextInput with a fixed height.
import React from 'react';
import { View, Button, TextInput } from 'react-native';
export default class App extends React.Component {
state = { myText: 'abc' }
_onPress = () => {
this.setState({ myText: this.state.myText + '\n 1' });
};
render() {
return (
<View>
<TextInput
style={{ height: 65, backgroundColor: 'red' }}
multiline={true}
value={this.state.myText}
/>
<Button
onPress={this._onPress}
title="Add text"
color="#841584"
/>
</View>
);
}
}
Basically I want to add text on my button click, and get the textInput scroll to the bottom as new text keeps on getting added. But this doesnt seem to be the case right now. This is how it looks.
How can I make my TextInput scroll, without adding any keyboard interaction to it ?
I am using ReactNative version v0.53.3
Related
New RN build from scratch. Only the code below exists.
Xcode version 12.0.1
iOS 14
RN 0.63.3
Scrolling and tapping makes TextInput jump to random places.
export default class TextField extends Component {
constructor(){
super();
this.state={textInput: ''}
}
handleChangeText = (textInput) => {
this.setState({ textInput });
}
return (
<View style={{flex: 1, backgroundColor: 'blue'}}>
<TextInput
style={{marginTop: 100, height: 300, backgroundColor: 'white'}}
value={this.state.textInput}
multiline={true}
onChangeText={this.handleChangeText}
></TextInput>
</View>
)
}
Please view gif for example:
https://gph.is/g/ZdXD55W
How can this be disabled? Or fixed so that the autoscroll goes to the correct place?
I have given an ImageBackground component and I want it to take the whole screen but it appears to have small paddings even if I resize twice or more the image. Where does it comes from ?
Here is the code of the component
import React from "react";
import { View, Text, Button, ImageBackground, StyleSheet } from "react-
native";
export class HomeScreen extends React.Component {
static navigationOptions = {
//To hide the NavigationBar from current Screen
header: null
};
render() {
return (
<ImageBackground source={require('../imgs/bgx.png')} style={
styles.container }>
</ImageBackground>
);
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'stretch',
resizeMode: 'stretch'
}
});
Make sure your source image does not have any transparency around.
Set width: '100%' and height: '100%' to the ImageBackground component. Does it change anything?
Add width='100%' and height='100%'
I'm using a multiline TextInput and I would like to dismiss the keyboard while scrolling using the onScroll() props
The Code I tried:
<View>
<TextInput
onChangeText={(bodyContent) => this.setState({bodyContent})}
value = {this.state.bodyContent}
editable = {true}
multiline={true}
onScroll = {() => Keyboard.dismiss() }
/>
</View>
Also noticed that onScroll events don't get fired on a scroll (even tried with console.log( ) )
react-native": "0.57.3"
Platform: IOS
You are right, the onScroll is not firing. There is an issue about this topic, however because the person who created the issue used an out of date version of RN, the issue was closed. You should open a new issue with the newest release of RN. I used RN 0.59 so its definitely still an issue.
Link to issue: https://github.com/facebook/react-native/issues/20309
Here is my implementation that can be copied and pasted anywhere:
import React, { useState } from 'react';
import { StyleSheet, TextInput, View, Keyboard } from 'react-native';
const FormInput = () => {
const [text, setText] = useState();
return (
<View style={styles.container}>
<TextInput
onChangeText={setText}
value={text}
editable
multiline
onScroll={() => Keyboard.dismiss()}
style={{ flex: 1, backgroundColor: 'red' }}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1
}
});
export default FormInput;
I used native base code of drawer to make a sidebar for my home page, the button works fine I used on press as this.openDrawer(). I am using this code :
import React, { Component } from 'react';
import { Drawer, Header, Icon, Left, Body, Right } from 'native-base';
import { Text, View, StatusBar } from 'react-native';
import SideBar from '../screens/sidebar';
export default class home extends Component {
closeDrawer = () => {
this.drawer._root.close()
};
openDrawer = () => {
this.drawer._root.open()
};
render() {
return (
<Drawer
ref={(ref) => { this.drawer = ref; }}
content={<SideBar navigator={this.navigator} />}
onClose={() => this.closeDrawer()} >
<Header>
<Left>
<Icon name="menu" style={{ color: '#fff' }}
onPress={() => this.openDrawer()}
/>
</Left>
<Body style={{ alignItems: 'center' }}>
<Text style={{ color: '#fff', fontSize: 20, fontWeight: 'bold' }}>Welcome to app!</Text>
</Body>
<Right></Right>
</Header>
</Drawer>
);
}
}
Sidebar opacity is less. check this image
I wonder why its opacity is less, I have tried giving a background color to white in my sidebar screen. Please help , anyone with native base?
I've looked at many different Stack Overflow posts about how to navigate screens in React Native but none of them seem to be working, perhaps because those posts were for older versions of React Native. Here is my code with the irrelevant parts taken out below. I'm trying to navigate from this screen to another screen called SubTasks. I made sure to say export default class SubTasks extends React.Component in SubTasks.js, by the way. The error I'm getting when I click on the button is "undefined is not an object (evaluating this.props.navigator.push'). Does anyone know where my error may be?
import React, { Component, PropTypes } from 'react';
import { StyleSheet,NavigatorIOS, Text, TextInput, View, Button}
from 'react-native';
import SubTasks from './SubTasks';
export default class App extends React.Component {
constructor(props) {
super(props);
}
renderScene(route, navigator) {
if(route.name == 'SubTasks') {
return <SubTasks navigator = {navigator} />
}
}
_navigate() {
this.props.navigator.push({
title: 'SubTasks',
})
}
render() {
return (
<View>
<NavigatorIOS
initialRoute= {{
title: 'SubTasks',
component: SubTasks,
}}
style = {{ flex: 1 }}
/>
<Button
title= 'SubTasks'
style = {{flexDirection: 'row', fontSize: 20, alignItems: 'flex-end'}}
color = 'blue'
onPress= {() => this._navigate()}>
styleDisabled = {{color: 'red'}}
</Button>
</View>
)}
}
Make sure you bind your _navigate function in your constructor:
constructor(props) {
super(props);
this._navigate = this._navigate.bind(this);
}
Or consider using arrow function
_navigate = () => {
this.props.navigator.push({
title: 'SubTasks',
})
}