I use TouchableNativeFeedback to show a nice ripple effect on Android, I use a <View> wrapper over TouchableNativeFeedback to solve a borderRadius problem on it (See here: react native elements issue).
When I perform a longPress, then the borderRadius fix does not have any affect.
Related
I've been making a simple container component in React Native where I want a background with a gradient. I´m using tailwind but for some reason it doesn't recognise it. I have tried:
<View style={tw`bg-gradient-to-r from-cyan-500 to-blue-500`}>
{children}
</View>
I have also tried too do it like this:
<View style={tw.style(`bg-gradient-to-r from-cyan-500 to-blue-500`)}>
{children}
</View>
Both shows nothing unfortunately. I'm suspecting its how I use Tailwind on a View component.
The problem is React Native (View) doesn't support gradient background. You need to use npm package such as:
react-native-linear-gradient OR
expo-linear-gradient
I am creating UI for my new project and the screen length is large so I put the Scrollview so that User can scroll the screen and on the same screen I am using SIX flautists to render some data but When I run my application on IOS simulator then I am getting warning on almost every screen where I am using Flatlist under Scrollview please check the attached screen shot
The warning appears because ScrollView and FlatList share the same logic, if FlatList run inside ScrollView, it's duplicated
By the way SafeAreaView doesn't work for me, the only way to solve is.you can use SafeArea like this
<SafeAreaView style={{flex: 1}}>
<FlatList
data={data}
ListHeaderComponent={ContentThatGoesAboveTheFlatList}
ListFooterComponent={ContentThatGoesBelowTheFlatList} />
</SafeAreaView>
This is happening because it isn't recommended to work with a FlatList within a ScrollView.
A workaround tho would be to add a property to your FlatList like so :
<FlatList
data={yourdata}
nestedScrollEnabled ----> Add this
/>
Hope it solves your problem
i get this case too and the best way is to disable that warning because sometimes we need to use flatlist inside scrollview
import React, { useEffect } from 'react';
import { LogBox } from 'react-native';
useEffect(() => {
LogBox.ignoreLogs(['VirtualizedLists should never be nested']);
}, [])
I am trying to translate a ball from one position (x1,y1) to another (x2,y2).
This translation is supposed to take place after clicking the ball.
I am using Animated.View which gets the current position of ball from a state variable. Inside this Animated.View I am wrapping the children using Touchable Opacity. I also looked around in internet and as per my understanding, this problem is related to absolute position of ball (initial and final position of ball is passed as a prop from parent)
<Animated.View style={this.state.position.getLayout()}>
<TouchableOpacity onPress={()=>console.log('clicked')}>
<View>
{this.props.children}
</View>
</TouchableOpacity>
</Animated.View>
I am unable to understand why onPress is not getting triggered and also want to know the solution to this problem. Thanks
Use TouchableOpacity from 'react-native-gesture-handler' instead of from 'react-native'.
import { TouchableOpacity } from 'react-native-gesture-handler';
Follow this post Cannot click TouchableOpacity in animated.view using React native
I have a code like this:
<View>
<View></View>
<ScrollView>
<View>
<TextInput/>
</View>
</ScrollView>
<View></View>
</View>
How can I handle it to response correctly to keyboard?
Both android and ios???
i have 2 permenant views top and bottom of the screen, this views pushed up on keyboard show
Your question is really unclear, but what I think you need is KeyboardAvoidingView.
It's a built-in React Native component that resizes based on the keyboard height.
To make sure the keyboard is not overlapping any important bits of your layout such as your text Input wrap your whole screen in KeyboardAvoidingView
https://facebook.github.io/react-native/docs/keyboardavoidingview
Solved!!
I solved it by handling the display of elements (views) on keyboard show and hide by keyboard in react native docs
I have a ScrollView which has TouchableOpacity and TextInput inside.
When I press on them, nothing happens.
I found the solution for TouchableOpacity and it was to add rejectResponderTermination={true} and it worked.
For example:
<TouchableOpacity
onPress={cameraHandler}
rejectResponderTermination={true}
>
However this does not work for TextInput.
<TextInput
onChangeText={updateText}
value={value.text}
rejectResponderTermination={true}
/>
I would like to use the functionality of rejectResponderTermination in TextInput. Any suggestions would be much appreciated.
rejectResponderTermination is not a prop of TextInput. Try removing it.
<TextInput
onChangeText={updateText}
value={value.text}
/>
A list of props can be found in the official documentation.
If you still want the functionality of rejectResponderTermination, currently you would have to build your own.
This SlideTextInput is an example of how you would do it.