I am trying to use keyboard avoiding view for not hiding my input element. I have tried multiple ways but its not working for me and elements still get hidden for some reason!
Can anyone help me figure out why?
As you see below the "notes" input section and the continue button is getting hidden, even though I'm using KeyboardAvoidingView component.
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
<KeyboardAvoidingView behavior="padding" style={styles.wrapper}>
{steps.map((s, index) => {
return (
<SlideAnimation
style={styles.slide}
open={index == step}
key={s.title}
>
<Stack key={s.title} direction="column">
<AnimatedSizeText selected={index == step}>
{`${index + 1}. ${s.title}`}
</AnimatedSizeText>
{s.content}
</Stack>
</SlideAnimation>
);
})}
</KeyboardAvoidingView>
</TouchableWithoutFeedback>
Details:
"expo": "^45.0.6",
"react-native": "0.68.2",
Had to use behavior='position'
Related
I am trying to achieve pagination for infinite scrolling in react native. When loading, I want to render the loading spinner at the bottom of the Flat list component. (Note: I'm using Expo for this app)
const renderFooter = () => {
if (!category.loading) return null;
return (
<View style={spinnerStyles.container}>
<ActivityIndicator animating size="large" color="#0000ff" />
</View>
);
};
return (
<View style={styles.container}>
<FlatList
columnWrapperStyle={{ justifyContent: "space-between" }}
numColumns={2}
data={category.data}
renderItem={categoryItem}
keyExtractor={(item) => item._id + item.sub_category}
onEndReachedThreshold={0}
listFooterComponent={renderFooter}
onEndReached={() => loadMore()}
/>
</View>
);
The loading spinner not correctly working with the flat list footer.
Has anyone run into this issue before, or does anyone have a solution?
Sorry, it's my simple syntax error. It's actually ListFooterComponent not listFooterComponent. Now it's working fine, Thank you.
Instead of calling the refrence, call the function. It should look something like this.
ListFooterComponent={renderFooter()}
When I use FlatList component inside ScrollView I see a warning:
VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.
Before and after FlatList I use a lot of other components and my screen is long.
I tried to wrap content with SafeAreaView and it doesn't help me, because in this case I can't scroll the content. I also tried to use ListHeaderComponent={SafeAreaView} and ListFooterComponent={SafeAreaView} in <FlatList>.
I use:
"react": "16.9.0",
"react-native": "0.61.5",
Here is a VirutalizedList -backed container implementation using FlatList:
import React from 'react';
import { FlatList } from 'react-native';
export default function VirtualizedView(props: any) {
return (
<FlatList
data={[]}
ListEmptyComponent={null}
keyExtractor={() => "dummy"}
renderItem={null}
ListHeaderComponent={() => (
<React.Fragment>{props.children}</React.Fragment>
)}
/>
);
}
Usage:
<VirtualizedView>
<Text>Anything goes here, even FlatList works good</Text>
<View style={{minHeight: 480}}> // leave enough space for better user experience
<FlatList
data={data}
keyExtractor={keyExtractor}
renderItem={({item}) => <Item data={item} />}
onRefresh={refetch}
refreshing={loading}
onEndReached={concatData}
/>
</View>
</VirtualizedView>
This will show scrollbar when your screen is too long and also remove the pesky warning message and performance will be saved without any problem.
There is a simpler solution using https://facebook.github.io/react-native/docs/scrollview#nestedscrollenabled
This is only required for Android (iOS works as expected even without it).
Just make sure to enable this prop in both parent and child ScrollViews (or child FlatLists).
What I've done in my case is something along the lines of this:
render() {
return (
<SafeAreaView style={{ flex: 1 }}>
...
<ScrollView>
...
<FlatList
scrollEnabled={false} // this line is important
...
</FlatList>
...
</ScrollView>
</SafeAreaView>
);
}
It doesn't remove the warning, but it does work as I want it to, as I need a ScrollView and a FlatList.
I am using:
"native-base": "^2.12.1",
"react-native": "0.59.5",
I have used checkbox and made a custom checkboxGroup and it was working. now I want to create a customCheckBox but it doesn't do anything,it's not getting checked, I even can not change it's color.
I tried to use it the simplest way possible as document says but it's still not working with a blue color.
here is what it looks like https://pasteboard.co/Ila4cfR.png
const CustomChBx = ({label, onPress, disabled, checked, textStyle}) => {
const {_chbx, _label, _wrapper} = styles;
return (
<View style={_wrapper}>
<Text style={[_label, textStyle]}>{label}</Text>
<CheckBox>
style={_chbx}
checked={checked}
disabled={disabled}
onPress={onPress}
color={Colors.accentColor}
</CheckBox>
</View>
);
};
i copied and pasted this code and then edited it, it's working !!!
<ListItem>
CheckBox checked={true} />
<Body>
<Text>Daily Stand Up</Text>
</Body>
</ListItem>
This is kind of what I want to achieve in my react native app. How should I go about it?
this is just an idea to show or hide a TextInput upon button press
return (
<View>
<TouchableOpacity onPress={() => this.setState({show : !this.state.show})}>
<Text>Click Here</Text>
</TouchableOpacity>
{this.state.show ? <TextInput
Value={this.state.value}
onChangeText={value => this.setState({value})}
/>
: null}
</View>
);
Initialize this.state.show as either true or false according to your requirement.
Your question could have been more clearer along with your efforts that you had tried
I’m writing a React Native app and I want to detect tap/clicks anywhere on the screen so I put an onClick handler on my <View> element but it doesn’t seem to be working. Here is my render function:
<View style={styles.container} onClick={this.onClick}>
<Text style={styles.welcome}>
Tap to change the background
</Text>
</View>
What do I need to do?
For making any element to handle touch/click events in a React-Native UI, you need to put the element inside a TouchableOpacity, TouchableWithoutFeedback, TouchableNativeFeedback or TouchableHighlight element:
<TouchableHighlight onPress = { this.onClick }>
<View style={styles.container}>
<Text style={styles.welcome}>
Tap to change the background
</Text>
</View>
</TouchableHighlight>
Hope that helps.
In React Native version > 55.3 you make check onPress events into your View if use onStartShouldSetResponder props.
Like example:
<View
style={{ flex: 1 }}
onStartShouldSetResponder={() => console.log('You click by View')}
>
<ScrollView
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this.onRefresh} />
}
>
<Text>Awesome</Text>
</ScrollView>
</View>
In example I showed how you can get onPress event on View and not blocking other event behind them. Refresh control still work correct.
In my case the following works fine. You can use onTouchStart and onTouchEnd handlers on any View via props, for example:
<View onTouchStart={() => this.doSomething()} />
More information
This worked for me...
onTouchEnd={() => alert('TAPPED')}
The easiest way to do that:
<TouchableOpacity style={styles.container} onPress={()=> whateverFunc(parameter)}>
<Text style={styles.welcome}>
Tap to change the background
</Text>
</TouchableOpacity>
So, you need to replace the 'View' component to a 'TouchableOpacity' or any other Touchable component and you also need to replace the 'onClick' prop to 'onPress'. That's all. The wrapping of a view with a TouchableWhatever component is not necessary at all.