We Keep Coding

How to preserve native animation of Switch?

I'd like to create a basic "setting toggle" component, with Title and Subtitle on the left, and a Switch on the right. I'd like to be able to switch the toggle when the whole component is clicked, not just when the switch is.
In order to achieve this is wrapped the component in a Touchable and execute the supplied onValueChange callback, so the container component can handle the state change of the switch.
export default function SettingToggle({
title,
subtitle,
toggled,
onValueChange,
}) {
return (
<TouchableWithoutFeedback
style={styles.container}
onPress={() => onValueChange(!toggled)}
>
<View>
<Text style={styles.title}>{title}</Text>
<Text style={styles.subtitle}>{subtitle}</Text>
</View>
<Switch
value={toggled}
onValueChange={value => onValueChange(value)}
></Switch>
</TouchableWithoutFeedback>
)
}
Now when I click the Switch, it animates nicely to the other value, but when click the component, the whole component redrawn with the new value of {toggled}, thus on the UI it feels like the switch is instantly changing to the other value.
Question 1: How could I preserve the animation even when the component is clicked, and not just the Switch?
Question 2: From where does React know, that it doesn't need to redraw the view when only the Switch is clicked? The render() method is called, as the parent component's state changes with the onValueChange call, so the SettingToggle is rerendered with a new {toggled} value. I assume the view is "recreated" but under the hood React probably isn't changing the view in the hierarchy with the newly created one, as it somehow knows that it is not needed. How does this work?

Change opacity of active marker in react-native-maps

I am working on a react-native application with react-native-maps and I would like to have the active marker (i.e. the one I click on and has the callout bubble open) to have a different color than the other markers.
I was able to change the color of the current marker by saving the ref to a state and comparing it when rendering the color (our keys coming back from the server are not trustworthy, so I'm using the ref for now, until the backend developers come up with an ID in the response), but I am stumbling into the following issue:
When I click somewhere else on the map to dismiss the callout, I was not able to set the marker color back to the previous one (I want them all to be at full opacity initially, then set the "inactive" ones to 50% opacity, until the callout is dismissed).
I have gone all over the docs and examples in react-native-maps but could not find any ways of hooking the state change event to the dismiss event.
Here is the current code I have for the Marker:
<Marker
key={index}
coordinate={loc.coordinate}
ref={ref => loc.ref = ref}
opacity={activeMarkerRef === null || activeMarkerRef === loc.ref ? 1 : 0.5}
onPress={() => setActiveMarkerRef(loc.ref);}
>
<Callout
tooltip
style={styles.bubbleView}
>
<MapInfoBubble>
<Text style={styles.bubbleTitle}>{loc.name}</Text>
<Text>
<Text style={styles.descrTitle}>Address: </Text>
<Text>{loc.address}</Text>
</Text>
<Text>
<Text style={styles.descrTitle}>Postal Code: </Text>
<Text>{loc.postal_code}</Text>
</Text>
</MapInfoBubble>
</Callout>
</Marker>
))}
</MapView>

Cant You use the onPress prop for the MapView component and set the selected marker state value back to null.By doing this a re-render would fix your problem

React Native get Clicked(pressed) component's attribute

I'm making some dynamic CardView which can show videos like as Facebook.
But there's problem when I press share button and comment button.
Because I need the clicked button's(share, comment) index.
So I think I can use the key prop of button.
I make buttons with touchableOpacity, then I'll set key of touchableOpacity
like this.
<TouchableOpacity
key = {some index}
>
some stuffs
</TouchableOpacity>
Then, I want to get pressed component's attr value( key value at here )
I can find the key value at
ReactNativeComponentTree.getInstanceFromNode(event.nativeEvent)
But this data always show my key is null.
There's no way to get clicked Component's key value?
Thanks for reading.

If you really need the index in the onPress handler, you can create a new inline function and pass along the index instead.
Example
<TouchableOpacity
key={someIndex}
onPress={() => this.handlePress(someIndex)}
>
some stuff
</TouchableOpacity>

View within Touchable not rendered on Android

I have created a custom button component that should respond to touches. It works as expected on iOS, however on Android it doesn't show up at all. While trying to find the cause of this issue.
I created two snacks on expo to demonstrate the issue. The first is the element wrapped in a Touchable element, and the second is the element without it.
In the first snack, it works as expected in iOS, however it is not shown on Android.
In the second snack, it appears as expected on both, however it is not clicking
https://snack.expo.io/#shepherdjerred/button-with-touchable
https://snack.expo.io/#shepherdjerred/button-without-touchable

For the first snack, add style={{flex: 1}} to the first view component. Flex adjusts a component based on the amount of space available in the application's screen.
return (
<TouchableWithoutFeedback onPressIn={this.handlePressIn.bind(this)}
onPressOut={this.handlePressOut.bind(this)}>
<View style={{flex: 1}}>
<View
style={[
this.stylesheet.buttonLayer,
this.stylesheet.buttonShadow
]}>
</View>
<View
style={[
this.stylesheet.buttonLayer,
this.stylesheet.buttonDepth
]}>
</View>
<View
style={[
this.stylesheet.buttonLayer,
this.stylesheet.buttonTop,
this.state.isPressed ? this.stylesheet.buttonTopPushed : this.stylesheet.buttonTopUnpushed
]}>
</View>
</View>
</TouchableWithoutFeedback>
);
}
For the second snack, the React Native website has two ways of creating buttons or components that can be touched.
References:
Facebook Inc. "Height and Width". React Native.
https://facebook.github.io/react-native/docs/height-and-width.html
(accessed April 2, 2018).
Facebook Inc. "Handling Touches". React Native.
https://facebook.github.io/react-native/docs/handling-touches.html
(accessed April 2, 2018).
https://stackoverflow.com/a/44063868/8121551 (accessed April 2,
2018).

Change navigationBar in response to navigation state

I'm writing an application and only want the back button to show when I push new views onto the Navigator (in this case a news article vs. a list of news articles).
It seems like the way to do this would be to modify render() to only include the Back button for certain navigator states. And while the React Native docs suggest components inside the navigator can access it using getContext, this doesn't seem to work for navigatorBar.
Is this the right way to go about it? How would I render the Back button only for certain navigation states?
<Navigator
initialRoute={{name: 'NewsList', index: 0}}
renderScene={this.renderScene}
sceneStyle={styles.navigator}
navigationBar={
<View style={styles.navbar}>
<View style={styles.logo_container}>
<Text style={styles.backButton}>Back</Text>
<Image
source={require( 'image!Logo' )}
style={styles.logo}
/>
</View>
<View style={styles.separator} />
</View>
}
/>

It will help to move your navigationBar code into its own component, pass the route information into it*, then check for route depth.
TLDR;
if (route.index > 0){
//Show Back Button.
}
Or just make your life easier and user either of these plugins to do the job for you.
React-Native-NavBar https://github.com/Kureev/react-native-navbar
React-Native-Router https://github.com/t4t5/react-native-router
*Passing the route may no longer be needed since the addition of Navigator.getContext(this).xxx was added. See navigator documentation for further info on getContext https://facebook.github.io/react-native/docs/navigator.html