I need to pass a method from parent to child component via {this.props.children} in react native.
i tried
{React.cloneElement(this.props.children, { lang: "en" })}
but it just giving an error. any idea on how to do this in react native ?
export default function ComponentA(props){
return(
<View style={{backgroundColor: "red"}}>
{props.children}
</View>
);
};
<ComponentA>
<Text>THIS TEXT WILL HAVE A RED BACKGROUND</Text>
</ComponentA>
Related
<BottomSheet
bottomSheerColor="#FFFFFF"
ref="BottomSheet"
initialPosition={'50%'}
snapPoints={['50%', '100%']}
isBackDrop={true}
isBackDropDismissByPress={true}
backDropColor="red" //======> this prop will change color of backdrop
header={
<View>
<Text style={styles.text}>Header</Text>
</View>
}
body={
<View style={styles.body}>
<Text style={styles.text}>Body</Text>
</View>
}
/>
the problem line is: ref="BottomSheet"
this ref is main problem
how can i fix this ?
String refs are legacy implementation. Please use the useRef hook to manage ref.
const bottomsheetRef = React.useRef(null)
....
<BottomSheet
ref={bottomsheetRef}
/>
Now to access the ref, do
bottomsheetRef.current
How do I open a stateless component with the TextInput already in foucs?
Thank you all!
Hi Túlio here is the code and you can also check the live working example I've added in this link --> Snack Example
export default function App() {
const focusRef = React.useRef()
React.useEffect(() => {
if (focusRef.current) focusRef.current.focus()
},[focusRef])
return (
<View style={styles.container}>
<TextInput
placeholder="FirstTextInput"
returnKeyType="next"
ref={focusRef}
blurOnSubmit={false}
style={{padding:10}}
/>
</View>
);
}
If you only want the TextInput field focused on component mount, then you can use the autoFocus prop of a TextInput component
e.g.
<TextInput
autoFocus={true}
/>
I just upgraded my app from React Native 0.58.5 to 0.61.2 and now I can't select text in FlatList on Android.
I tried to set the selectable = {true} in the Text component in React Native 58.5, and it worked well and could copy the content in the Text.
But after upgraded the React Native version from 0.58.5 to 0.61.2, and couldn't select the text for copy/paste the content in Android 9.0.
Actually it worked on Android 5.0, but didn't work on Android 9.0
export default class App extends React.Component {
_renderItem = ({item}) => {
return (
<View>
<Text selectable>{item}</Text>
</View>
)
}
_keyExtractor = (item, index) => index.toString();
render() {
return (
<View style={styles.container}>
<Text selectable>This is selectable Text...</Text>
<FlatList
data={['not selectable text', 'not selectable text']}
renderItem={this._renderItem}
keyExtractor={this._keyExtractor}
/>
</View>
);
}
}
Expected behavior: Text in Flatlist should be selectable.
Current behavior: Can't select the Text component even though set the selectable={true} in Android 9.0
I solved this by adding a key prop to the Text component:
<Text selectable={true} key={Math.random()}>
{text}
</Text>
EDIT: The solution above does not seem to work on all RN versions, an alternative solution is setting removeClippedSubviews={false} on the FlatList
You should enclose this into touchableopacity..
<TouchableOpacity style={{ flex: 1 }}
onPress={() =>}}>
<View>
<Text selectable>{item}</Text>
</View>
</TouchableOpacity>
I am developing a simple React Native application for learning purpose. I am just taking my initial step to get into the React Native world. But in this very early stage, I am having problems. I cannot get a simple touch event working. I am implementing touch event using TouchableWithoutFeedback. This is my code.
class AlbumList extends React.Component {
constructor(props)
{
super(props)
this.state = {
displayList : true
}
}
componentWillMount() {
this.props.fetchAlbums();
}
albumPressed(album)
{
console.log("Touch event triggered")
}
renderAlbumItem = ({item: album}) => {
return (
<TouchableWithoutFeedback onPress={this.albumPressed.bind(this)}>
<Card>
<CardSection>
<Text>{album.artist}</Text>
</CardSection>
<CardSection>
<Text>{album.title}</Text>
</CardSection>
</Card>
</TouchableWithoutFeedback>
)
}
render() {
let list;
if (this.state.displayList) {
list = <FlatList
data={this.props.albums}
renderItem={this.renderAlbumItem}
keyExtractor={(album) => album.title}
/>
}
return (
list
)
}
}
const mapStateToProps = state => {
return state.albumList;
}
const mapDispatchToProps = (dispatch, ownProps) => {
return bindActionCreators({
fetchAlbums : AlbumListActions.fetchAlbums
}, dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps)(AlbumList);
As you can see, I am implementing touch event on the list item. But it is not triggering at all when I click on the card on Simulator. Why? How can I fix it?
You should wrap your content in component like this:
<TouchableWithoutFeedback>
<View>
<Your components...>
</View>
</TouchableWithoutFeedback>
TouchableWithoutFeedback always needs to have child View component. So a component that composes a View isn't enough.
So instead of
<TouchableWithoutFeedback onPressIn={...} onPressOut={...} onPress={...}>
<MyCustomComponent />
</TouchableWithoutFeedback>
use:
<TouchableWithoutFeedback onPressIn={...} onPressOut={...} onPress={...}>
<View>
<MyCustomComponent />
</View>
</TouchableWithoutFeedback>
See the github issue for more info
Can be used with <TouchableOpacity activeOpacity={1.0}> </TouchableOpacity>
For those who struggle with this issue in react-native 0.64, and wrapping it in just a View doesn't work, try this:
<TouchableWithoutFeedback onPress={onPress}>
<View pointerEvents="none">
<Text>Text</Text>
</View>
</TouchableWithoutFeedback>
In my case i accidentally imported TouchableWithoutFeedback from react-native-web instead of react-native. After importing from react-native everything worked as expected.
In more recent React Native versions, just use Pressable instead:
https://reactnative.dev/docs/pressable
In my case, there was a shadow underneath, which caused instability. What I did to solve it was quite simple: zIndex: 65000
<View style={{ zIndex: 65000 }}>
<TouchableWithoutFeedback onPressIn={() => {}>
<View>
</View>
</TouchableWithoutFeedback>
</View>
If I want to prevent the onPress event on the View component propagating to the parent Touchable for the following Sample component, what's the best option other than wrapping the child view in a Touchable please?
export default function Sample (): Element<*> {
return(
<TouchableOpacity>
<View>
<Text>Sample</Text>
</View>
</TouchableOpacity>
);
}
In my case I simply put the View inside another TouchableOpacity (with activeOpacity to 1 to block any graphic effect):
export default function Sample (): Element<*> {
return(
<TouchableOpacity>
<TouchableOpacity activeOpacity={1}>
<View>
<Text>Sample</Text>
</View>
</TouchableOpacity>
</TouchableOpacity>
);
}