I'm using the react-native-reanimated lib together with react-native-gesture-handler to zoom some elements on the screen.
I've added a react-native-slider inside their shared parent component, to give some extra help (if the item is too small it's hard to pinch it).
I can pinch the element and then slide it, but then I can't go back again to the pinchGestureHandler, the image become zoomable only with the slider.
Export default class Zoomable extends Component {
constructor(props) {
super(props);
this.zoomableItem = props.zoomableItem;
this.Z = new Value(1);
const offsetZ = new Value(1*this.moveableItem.lastScale);
this.handleZoom = event([
{
nativeEvent: ({ scale: z, state }) =>
block([
cond(eq(state, State.ACTIVE), set(this.Z, multiply(z, offsetZ))),
cond(eq(state, State.END), [set(offsetZ, multiply(offsetZ, z))]),
]),
},
]);
}
componentDidUpdate(){
props.slider.value ? this.Z = props.slider.value : null
}
render() {
return (
<Animated.View style={[Styles.container,{transform: [{ scale: this.Z }] } ]}>
<PinchGestureHandler
ref={this.pinchRef}
onGestureEvent={this.handleZoom}
onHandlerStateChange={this.handleZoom}>
<Animated.Image style={Styles.image} source={{ uri: '' }}/>
</PinchGestureHandler>
</Animated.View>
);
}
}
this.Z is an animated object so I forgot to assign it a new value with the proper method:
this.Z.setValue(props.slider.value)
Related
I've made a custom Radio Button in React Native. Below is the link to my code.
https://gist.github.com/shubh007-dev/0d8a0ca4d6f7d1530f3e28d223f9199e
What I want is to animate the radio button when I press it, like it's done in this library - https://www.npmjs.com/package/react-native-simple-radio-button
I'm able to animate my radio button for the first time but when I press another radio button, animation doesn't happen.
(Another approach for this question) How can I make sure that the Animated value is different for each Radio Button?
You either have to make a custom component for the radio or use x animated variable for x radio buttons.
Now, making x variable for x buttons is not an efficient solution but it could be used if you got only a few buttons.
You made a custom component which renders a flatlist and that's the problem; can't animate buttons separately in the same component you use to render them.
You should split your code and make the radio button a component itself.
Something like that (didn't test it, but that way it should work) :
export class RadioButton extends Component {
constructor(props) {
super(props);
this.state = {
radioSelected: this.props.selectedItemId,
};
}
radioClick = id => {
this.setState({ radioSelected: id });
this.props.onChange(id);
}
renderRadioButton = item => {
const { radioSelected } = this.state;
const { labelLeftStyle, labelRightStyle, labelOnRight } = this.props;
return (
<AnimatedRadio
{...item}
isSelected={item.id === radioSelected}
labelLeftStyle={labelLeftStyle}
labelRightStyle={labelRightStyle}
labelOnRight={labelOnRight}
radioClick={this.radioClick}
/>
);
};
render() {
return (
<FlatList
data={this.props.radioOptions}
extraData={this.state}
renderItem={({ item }) => this.renderRadioButton(item)}
keyExtractor={(item, index) => index.toString()}
/>
);
}
}
export class AnimatedRadio extends Component {
springValue = new Animated.Value(1.1);
onRadioClick = id => () => {
const { radioClick } = this.props;
radioClick(id);
this.spring();
};
spring = () => {
Animated.spring(this.springValue, {
toValue: 0.95,
friction: 2,
tension: 15,
}).start();
};
render() {
const {
id,
label,
labelLeftStyle,
labelRightStyle,
labelOnRight,
isSelected,
} = this.props;
return (
<View key={id} style={STYLES.radioContainerView}>
<TouchableOpacity
style={STYLES.radioButtonDirectionStyle}
onPress={this.onRadioClick(id)}
>
{labelOnLeft == true ? (
<Text style={[labelLeftStyle]}>{label}</Text>
) : null}
<View
style={[isSelected ? STYLES.selectedView : STYLES.unselectedView]}
>
{isSelected ? (
<Animated.View
style={[
STYLES.radioSelected,
{ transform: [{ scale: this.springValue }] },
]}
/>
) : null}
</View>
{labelOnRight == true ? (
<Text style={[labelRightStyle]}>{label}</Text>
) : null}
</TouchableOpacity>
</View>
);
}
}
This way each component radio will have its own animated value, and won't interfere with others buttons.
I did it using LayoutAnimation like below.
LayoutAnimation.configureNext({
duration: 300,
create: {
type: 'linear',
property: 'scaleXY',
},
update: {
type: 'spring',
springDamping: 0.4,
property: 'opacity',
},
delete: {
type: 'easeOut',
property: 'opacity',
},
});
I'm trying to toggle view's opacity with animated value, by handling the button click, but I'm not getting the desired result, except the first time button is clicked, it fades out (opacity = 0) but when I press the button again nothing happens and I can't see my view. Here's the code:
export default class App extends React.Component {
state = {
animation: new Animated.Value(1)
}
startAnimation = () => {
const { animation } = this.state
Animated.timing(animation, {
toValue: animation === 0 ? 1 : 0,
duration: 1000
}).start()
}
render() {
const animatedStyle = {
opacity: this.state.animation
}
return (
<View style={styles.container}>
<Animated.View style={[styles.box, animatedStyle]} />
<Button title="Toggle fade" onPress={this.startAnimation} />
</View>
);
}
} .
Does anybody know what am I doing (understanding) wrong?
Thanks!
I think it is because you don't change the state for your animated values, and this const { animation } = this.state will have always the same value, and toValue: animation === 0 ? 1 : 0, will have the same value too. I try to show you how I did this in my projects, but you have to update it for your needs.
export default class App extends React.Component {
state = {
animation: new Animated.Value(1),
isVisible: false //add a new value to check your state
}
startAnimation = () => {
const { isVisible } = this.state
Animated.timing(animation, {
toValue: isVisible === 0 ? 1 : 0,
duration: 1000
}).start(() => {
this.setState({ isVisible: !this.state.isVisible });//set the new state, so the next click will have different value
})
}
render() {
const animatedStyle = {
opacity: this.state.animation
}
return (
<View style={styles.container}>
<Animated.View style={[styles.box, animatedStyle]} />
<Button title="Toggle fade" onPress={this.startAnimation} />
</View>
);
}
} .
I am using this:
let val = this.state.sliderOpen ? 0.8 : 0;
Animated.timing( // Animate over time
this.state.sliderAnimation, // The animated value to drive
{
toValue: val, // Animate to opacity: 1 (opaque)
duration: 5, // Make it take a while
}
).start();
this.setState({
sliderOpen : !this.state.sliderOpen
})
Maybe try to extract the value to be changed.
Thanks to #oma I was able to get it work, here's the snack:
Toggle opacity in React Native
Besides that, I've found a nice article on this where this feature can be reused:
Animating appearance and disappearance in React Native
And here's the snack of the working example, with slight modification.
Animate opacity
This solution looks pretty well, hope you can benefit from it.
I made a node package react-native-fade-in-out that toggles a view's opacity with an animated value. You can look at the source code to see how it is accomplished, but here's a simplified version:
import React, {PureComponent} from 'react';
import {Animated} from 'react-native';
export default class FadeInOut extends PureComponent {
state = {
fadeAnim: new Animated.Value(this.props.visible ? 1 : 0),
};
componentDidUpdate(prevProps) {
if (prevProps.visible !== this.props.visible) {
Animated.timing(this.state.fadeAnim, {
toValue: prevProps.visible ? 0 : 1,
duration: 300,
}).start();
}
}
render() {
return (
<Animated.View style={{...this.props.style, opacity: this.state.fadeAnim}}>
{this.props.children}
</Animated.View>
);
}
}
I currently developing a react native app ( version 0.55.2) and mapbox/react-native (version 6.1.2-beta2)
I have a situation where some annotations are shown initially on map render, then further annotations are loaded when the user's zooms.
The first annotations are displayed at the right place.
However, when new annotations are added, there are all stuck at the top left corner.
Following their documentation, https://github.com/mapbox/react-native-mapbox-gl/blob/master/docs/MapView.md, I tried to call the function when the map is loaded or rendered. I even tried a setTimeout. The annotations always appears at the topleft map.
Any ideas how should I approach this?
THanks!
class map extends React.Component {
constructor(props) {
super(props);
this.getMapVisibleBounds = getMapVisibleBounds.bind(this);
this.state = {
...INIT_MAP_STATE
};
}
//compo lifecyle
componentDidUpdate(prevProps, prevState) {
if (this.state.userPosition.longitude !== prevState.userPosition.longitude) {
this.setBounds();//first annotations. works fine
}
if (this.state.zoomLevel !== prevState.zoomLevel) {
this.setBounds(); //update annotations. doesn't work
}
}
render()=>{
const { quest, checkpoint } = this.props;
const { selectedIndex } = this.state;
return (
<View style={styles.container}>
<Mapbox.MapView
styleURL={MAP_STYLE}
zoomLevel={this.state.zoomLevel}
centerCoordinate={[this.state.userPosition.longitude,
this.state.userPosition.latitude]}
style={styles.mapWrap}
>
{this.renderMap(checkpoint, "checkpoint")}
</Mapbox.MapView>
</View>
);
}
setBounds = () => {
this.getMapVisibleBounds(this.map)
.catch(err => {
console.error(err);
})
.then(bounds => {
this._setMapBounds(bounds);// set state bounds
return this.props.onLoadQuest(bounds); //api call
});
}
}
// annotations rendering
class checkPoint extends Component {
constructor(props) {
super(props);
}
renderAnnotations = (data, id) => {
const uniqKey = `checkpoint_${id}`;
return (
<Mapbox.PointAnnotation key={uniqKey} id={uniqKey} coordinate={[data[0], data[1]]}>
<TouchableWithoutFeedback onPress={idx => this.onSelect(id)}>
<Image source={checkPointImg} style={styles.selfAvatar} resizeMode="contain" />
</TouchableWithoutFeedback>
</Mapbox.PointAnnotation>
);
};
render() {
if (!this.props.checkpoint || isEmpty(this.props.checkpoint)) {
return null;
}
const { hits } = this.props.checkpoint;
if (!Array.isArray(hits)) {
return [];
}
return hits.map((c, idx) =>
this.renderAnnotations(c._source.location.coordinates, c._source.id)
);
}
}
"PointAnnotation" is legacy, try passing your points to as an object. You're map render will be so much faster once you make the swap. Something like this.
<MapboxGL.MapView
centerCoordinate={[ userLocation.longitude, userLocation.latitude ]}
pitchEnabled={false}
rotateEnabled={false}
style={{ flex: 1 }}
showUserLocation={true}
styleURL={'your_style_url'}
userTrackingMode={MapboxGL.UserTrackingModes.MGLUserTrackingModeFollow}
zoomLevel={10}
>
<MapboxGL.ShapeSource
key='icon'
id='icon'
onPress={this._onMarkerPress}
shape={{type: "FeatureCollection", features: featuresObject }}
type='geojson'
images={images}
>
<MapboxGL.SymbolLayer
id='icon'
style={layerStyles.icon}
/>
</MapboxGL.ShapeSource>
</MapboxGL.MapView>
Where "featuresObject" looks something like this...
let featuresObject = []
annotation.forEach((annot, index) => {
let lat = annot.latitude
let lng = annot.longitude
featuresObject[index] = {
type: "Feature",
geometry: {
type: "Point",
coordinates: [lng, lat]
},
properties: {
exampleProperty: propertyValue,
}
}
})
Example for polygon layer
Example with custom icon
You can add markers dynamically by using this code:
Create marker component:
const Marker = ({ coordinate, image, id }) => {
return (
<MapboxGL.MarkerView coordinate={coordinate} id={id}>
// Add any image or icon or view for marker
<Image
source={{ uri: image }}
style={{width: '100%', height: '100%'}}
resizeMode="contain"
/>
</MapboxGL.MarkerView>
);
};
Consume it inside MapBoxGL:
<MapboxGL.MapView
style={{
// it will help you keep markers inside mapview
overflow: 'hidden'
}}>
{markers &&
markers?.length > 0 &&
markers.map((marker, index) => (
<Marker
coordinate={[marker.longitude, marker.latitude]}
// id must be a string
id={`index + 1`}
image={getIconUrl(index)}
/>
))
}
</MapboxGL.MapView>
const layerStyles = Mapbox.StyleSheet.create({
icon: {
iconImage: "{icon}",
iconAllowOverlap: true,
iconSize: 0.5,
iconIgnorePlacement: true
}
});
const mapboxIcon = props => {
return (
<Mapbox.ShapeSource
shape={makeMapBoxGeoJson(props.datum, props.mapKey, props.name)}
key={`${props.name}_key_${props.mapKey}`}
id={`${props.name}_${props.mapKey}`}
images={getIcon(props.name)}
onPress={idx => (props.isActive ? props.onSelectId(props.mapKey) : null)}
>
<Mapbox.SymbolLayer
id={`${props.mapKey}_pointlayer`}
style={[layerStyles.icon, { iconSize: props.iconSize ? props.iconSize : 0.5 }]}
/>
</Mapbox.ShapeSource>
);
};
I just began playing around with React Native and I was trying to figure out how to disable and enable a touchableOpacity when the lengths of two inputTexts are > 0.
On my touchableOpacity I have it set to disabled={true} and it has a children Text with opacity set. When a user types into the textInput's I want to set disabled={false} and change the Text opacity to 1.
What's the best way to do this in react native?
Should i put ref's on them?
Should I use a className?
setNativeProps maybe?
If your constructor's state contains a flag for "isDisabled" and "textOpacity", then you can call setState in the onChangeText function that will change the state of isDisabled and textOpacity. The text component can use the opacity from the state's textOpacity and the touchableOpacity can use the state's isDisabled.
Ex:
`class foo extends Component {
constructor(props) {
super(props);
this.state = {
isDisabled: true,
textOpacity: 0.1,
text1: '',
text2: '',
};
onTextChange1(text) {
if (text.length > 0 && this.state.text2.length > 0) {
this.setState({isDisabled: false, textOpacity: 1, text1: text});
}
else {
this.setState({isDisabled: true, textOpacity: 0.1, text1: text});
}
}
onTextChange2(text) {
if (text.length > 0 && this.state.text1.length > 0) {
this.setState({isDisabled: false, textOpacity: 1, text2: text});
}
else {
this.setState({isDisabled: true, textOpacity: 0.1, text2: text});
}
}
render() {
return (
<View>
<TextInput onChangeText={(text) => this.onTextChange1(text)} value={this.state.text1}/>
<TextInput onChangeText={(text) => this.onTextChange2(text)} value={this.state.text2}/>
<TouchableOpacity disabled={this.state.isDisabled}>
<Text style={{opacity:this.state.textOpacity}}>Hello World!</Text>
</TouchableOpacity>
</View>
);
}
}
I have not tested the above, but I believe this is basically what you are looking for. We perform a check in the on text change to see if a certain condition is met, and depending on if it is, we change the parameters of the child components as you stated. Calling setState and modifying props are the only ways to trigger a rerender, so this is how in react-native we work with rerendering components.
if you want your opacity to be able to change depending on user moves, you need to set it(opacity) in state of your parent component.You can do this for example:
export class Parent extends React.Component {
constructor(props) {
super(props);
this.state = { opacity: 0 }
}
render() {
Some components ....
<TextInput style={{opacity: this.state.opacity}} onChangeText={ () => this.setState({opacity: 1}) } ...other props here .../>
Some components ....
}
}
you can also apply other styles to your TextInput component.
I'm using a FlatList with a consequent ListHeaderComponent as the root component of my screen. I don't want the top of it to bounce on scroll, but I want to keep the bottom bouncing for UX'n'feel purpose as the FlatList supports infinite scroll.
Any ideas how-to?
A solution would be to listen to scroll events and check whether the bounces prop inherited from ScrollView should be enabled or not. Note that I personally find this solution to be a bit of an overkill, but it works as expected.
You can find a fully working example at the following URL: https://snack.expo.io/SkL-L0knZ. You can preview it right in the browser and you can also try it on your mobile device with the Expo app.
Here is the result (forget about the lag, as this was captured in the browser):
And here is the relevant source code:
export default class App extends Component {
constructor (props) {
super(props);
this.state = { bounces: false };
this.renderHeader = this.renderHeader.bind(this);
this._onScroll = this._onScroll.bind(this);
}
_onScroll (event) {
const scrollPosition = event && event.nativeEvent && event.nativeEvent.contentOffset && event.nativeEvent.contentOffset.y;
let newBouncesValue;
if (scrollPosition < viewportHeight / 3) {
newBouncesValue = false;
} else {
newBouncesValue = true;
}
if (newBouncesValue === this.state.bounces) {
return;
}
this.setState({ bounces: newBouncesValue });
}
renderHeader () {
const { bounces } = this.state;
const style = [
styles.header,
{ backgroundColor : bounces ? 'darkseagreen' : 'firebrick'}
];
return (
<Text style={style}>{ bounces ? 'CAN BOUNCE' : "WON'T BOUNCE"}</Text>
);
}
renderItem ({item}) {
return (
<Text style={styles.row}>{item.key}</Text>
);
}
render() {
return (
<View style={styles.container}>
{ this.renderHeader() }
<FlatList
data={DUMMY_DATA}
renderItem={this.renderItem}
onScroll={this._onScroll}
bounces={this.state.bounces}
scrollEventThrottle={16}
/>
</View>
);
}
}