<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
Related
This language is React native
export default function forgotPassword(props) {
const [hidePassword, showPassword] = useState(true);
const managePasswordVisibility = () => {
showPassword({ hidePassword: !hidePassword });
};
return (
<View style={styles.textBoxBtnHolder}>
<TextInput
secureTextEntry={hidePassword}
textContentType="password"
style={styles.textBox}
/>
<TouchableOpacity
activeOpacity={0.8}
style={styles.visibilityBtn}
onPress={managePasswordVisibility}
>
<Image
source={
hidePassword
? require("../../assets/icons/hide.png")
: require("../../assets/icons/view.png")
}
style={styles.btnImage}
/>
</TouchableOpacity>
</View>
);
}
i cant able to use hide password in securityTextEntry if i use hooks its showing error and the password is not showing its just hided and its thows a warning .please any one help
failed prop 'secureTextEntry' of type 'object' suppied to 'forwardRef(TextInput) expected boolen
You don't have to use object inside showPassword(), it will only change value of hidePassword so
showPassword(!hidePassword);
How to access props value in component in test file (Jest and Enzyme)?
This is my component, I want to access prop value in Pin component in test file (Jest and Enzyme), is it possible?
<View style={styles.containerForm}>
<Text style={styles.textDescriptionGreyFont}>Enter Code</Text>
<Pin testID={'input_pin'} count={4} value={otp} setCode={(code) => setOtpCode(code)} />
<View style={styles.containerResendTimer}>
{renderResend()}
<Text style={styles.textDescriptionThemaFont}>{renderTimer()}</Text>
</View>
<ButtonFull
testID={'submit_otp'}
isDisabled={false}
buttonColor={fullFilled ? color.thema : color.disabledButton}
onPress={() => submitOtp()}
title={submitting ? 'Loading ...' : 'Submit'}
/>
</View>
You could find the prop value of Pin component like this
const wrapper = shallow(<Component .... />);
expect(wrapper.find(Pin).props().testID).toBe('input_pin');
I found the solution,
expect(appWrapper.find('Pin').prop('value')).toBe('')
expect(appWrapper.find('ButtonFull').prop('isDisabled')).toBe(true)
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>
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>
This is probably basic, but I'm getting tripped up with the documentation between the JS Mapbox and the React Native Mapbox. I'm creating a new map instance by importing mapbox into my project via import Mapbox from '#mapbox/react-native-mapbox-gl';
and then in the render() function I'm loading the map via:
<View style={container}>
<Mapbox.MapView
styleURL={Mapbox.StyleURL.Light}
zoomLevel={12}
centerCoordinate={[lat, lng]}
style={styles.container}
showUserLocation
>
{this.renderAnnotations()}
</Mapbox.MapView>
</View>
The renderAnnotations() function I've defined as follows:
renderAnnotations() {
return this.state.stations.map((station, index) =>
<TouchableHighlight onPress={this._map.flyTo.bind(this, station)} key={index}>
<View ref={component => this._root = component}>
<StationPoint key={station.id} station={station} />
</View>
</TouchableHighlight>
);
}
The goal is for it to render points on the map with a corresponding flyTo onPress event. The map and these points render perfectly fine, but the onpress event returns:
error "Cannot read property 'flyTo' of undefined"
On this tutorial, it suggests you can access the map using this._map. Is this correct and I'm making a different error? Or is there an alternative way for accessing the map methods? Any help is much appreciated!
Figured out the answer, in case it helps someone else. I wasn't defining a ref property on the MapView. It should have had a reference defined as this._map like the following:
<View style={container}>
<Mapbox.MapView
ref={(c) => this._map = c}
styleURL={Mapbox.StyleURL.Light}
zoomLevel={12}
centerCoordinate={[lat, lng]}
style={styles.container}
showUserLocation
>
{this.renderAnnotations()}
</Mapbox.MapView>
</View>