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;
Related
I have problem with render data on IOS Simulator. Render is work properly on website, but on IOS I still got stuck on "Loading.." text.
Here is my code:
import React from 'react'
import { useState } from 'react';
import { useEffect } from 'react';
import { SafeAreaView, Text, View, StyleSheet, Image, Alert } from 'react-native';
import { Card } from 'react-native-paper'
import firebase from 'firebase'
import Button from '../components/Button'
import Background from '../components/Background'
import TopBar from '../components/TopBar'
export default function HomeScreen({ navigation }) {
const [data, setData] = useState([])
const sampleData = [{id:0, title:"One"}, {id:1, title: "Two"}]
useEffect(() =>
{
const donorsData = [];
firebase.database()
.ref("testdb")
.orderByChild("isDonor")
.equalTo(true)
.once("value")
.then((results) => {
results.forEach((snapshot) => {
donorsData.push(snapshot.val());
});
setData(donorsData);
});
}, [])
const card = data.length > 0
? data.map(item =>
{
return <Card key={item.uid} style={{ marginBottom: 20, borderRadius: 10, }}>
<Text>{item.name}</Text>
<Text>{item.description}</Text>
<Image src={item.photo}></Image>
</Card>
})
: <Text>Loading...</Text>
return (
<View style={styles.container}>
{card}
</View>
);
}
On website is everything ok Website Screen
But on IOS Simulator I got only Loading
IOS Screen
I tried a lot of solutions found here, but no one works with this case. I think is probably because iOS doesn't have data? When I put console log at to top of return, I got nothing.
This might be a race condition error. You shouldn't rely on the data being fetched within 1500ms.
If that doesn't work. Make sure your result from firebase is correct.
Maybe something like this?
const [data, setData] = useState([])
const fetchDonorData = () => {
firebase.database()
.ref("testdb")
.orderByChild("isDonor")
.equalTo(true)
.once("value")
.then((results) => {
console.log({result}) //Make sure the data looks the way you want it
const mappedResult = results?.map(snapshot => snapshot.val())
setData(mappedResult)
})
}
useEffect(() => {
fetchDonorData()
}, [])
const renderItem = ({item}) =>
<Card style={{ marginBottom: 20, borderRadius: 10, }}>
<Text>{item.name}</Text>
<Text>{item.description}</Text>
<Image src={item.photo}></Image>
</Card>
return (
<View style={styles.container}>
<FlatList
data={data}
renderItem={renderItem}
keyExtractor={({item}) => item.uid}
ListEmptyComponent={<Text>Loading...</Text>}
/>
</View>
)
I'm pretty new to the idea of states in react native and have trouble using them to change the states of the components. I have three text components one which is a question and another two are answers (yes and no), and another text component that checks if my answer to the question is write, so the check text component. When I click on yes for a certain question the state of the last check component should change to 'right' if the answer was yes or to 'wrong' if the answer is no. So basically, this is what I want to do :
So, the idea is when i click on yes and then check the pop-up should be this. This is the code I have so far:
import React, {useState} from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
export default function App() {
const [myState, setMyState] = useState('Yes');
const [myState2, setMyState2] = useState('Right');
const updateState = () => {
let tempStr = myState;
if (tempStr == "Yes"){
setMyState2('Right');
}
else{
setMyState2('Wrong');
};
}
return (
<View style={{alignItems: 'center', top: 150}}>
<Text>Is the earth round?</Text>
<Text mystate={setMyState}>Yes</Text>
<Text mystate={setMyState}>No</Text>
<Text mystate2={setMyState2}>Check</Text>
</View>
);
}
Currently, none of my text components seem to work.
Can anyone tell me how it could be done. Thanks!
I believe this will sufficiently help you with your question. useEffect is basically the new ComponentWillUpdate for hooks, and you should use it to check for when a state in a functional component updates. On the other hand, your code wasn't working because you were passing a mystate prop to the Text component. There is simply no mystate prop, and there also isn't a command to tell the app that you are pressing the text. You can simply use the onPress prop. Personally I prefer using a TouchableOpacity, but you could use a Button or even just pass it into the Text component itself.
import React, { useState, useEffect } from 'react'
import { View, Text, TouchableOpacity, Alert } from 'react-native'
export default function App() {
const [myAnswer, setMyAnswer] = useState('Who knows')
const [correct, setCorrect] = useState('')
useEffect(() => {
if (myAnswer == 'Who knows') setCorrect('Please answer!')
else if (myAnswer == 'Round') setCorrect('Correct!')
else if (myAnswer == 'Not round') setCorrect('Wrong :(')
}, [myAnswer])
return (
<View style = {{ justifyContent: 'center', alignItems: 'center', flex: 1 }}>
<Text>Is the Earth round?</Text>
<TouchableOpacity
onPress = {() => setMyAnswer('Round')}>
<Text>Yes</Text>
</TouchableOpacity>
<TouchableOpacity
onPress = {() => setMyAnswer('Not round')}>
<Text>Nope</Text>
</TouchableOpacity>
<TouchableOpacity
onPress = {() => { Alert('Your answer was...', correct) }}>
<Text>Check My Answer</Text>
</TouchableOpacity>
</View>
)
Why and how to use the progressImage property in the <ProgressViewIOS/> component in react-native ? The documentation doesn't seem to be understandable. Can anyone share a screenshot output of this property on the iOS? Thanks !!!
progressImage is an image to use for the portion of the progress bar that is filled in ProgressViewIOS.
If you provide a custom image for it, the progressTintColor property is ignored.
Images:
progressImage.png
trackImage.png
Output:
Code:
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, ProgressViewIOS, Dimensions} from 'react-native';
const screenWidth = Dimensions.get("screen").width;
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<ProgressViewIOS
style={{width: screenWidth - 30}}
progress={0.5}
progressViewStyle = 'default'
trackImage={require('./trackImage.png')}
progressImage={require('./progressImage.png')}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
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
I am a newbie in react native.
I have one similar problem in different projects. When I try to compile my project, I see this problem. Why this error is appear?
P.S. I am learning react-native by tutorials like a appcoda.com
Picture of my error
Featured.js
'use strict';
var React = require('react-native');
var{
StyleSheet,
View,
Text,
Component
} = React;
var styles = StyleSheet.create({
description:{
fontSize: 20,
backgroundColor: 'white'
},
container:{
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
});
class Featured extends Component{
render() {
return(
<View style = {styles.container}>
<Text style = {styles.description}>
Featured tab
</Text>
</View>
);
}
}
module.exports = Featured;
Change your import statement as below
import React, { Component } from 'react';
import {
StyleSheet,
View,
Text,
} from 'react-native';