I need to offer a list of options in a modal. Android has <Picker> which on click presents the items. iOS has Alert.
On Android I want to use the <Picker> in dialog mode functionality without having to create an element, just like the Alert API on iOS. Is this possible?
Anyway to trigger a "press" on the <Picker> to get its dialog modal?
So, this is a way of doing what you want. You could show/hide the picker by wrapping it in another Component. This is an old example I used once:
const MyPicker = React.createClass({
getInitialState() {
return { displayed: true };
},
show() {
this.setState({ displayed: true });
},
hide() {
this.setState({ displayed: false });
},
render() {
if (this.state.displayed) {
return <Picker {...this.props}>{this.props.children}</Picker>;
} else {
return null;
}
},
});
Related
I use the react-router library and the history props to navigate through my react-native application. If the user is not on the StartPage a click on backpress on an android device will navigate him to the StartPage. If the user already is on the StartPage a backpress leads to a toast (AndroidToast from 'react-native') with a message "click again to close". The time between two clicks on backpress is won by a simple timestamp.
if(this.props.history.location.pathname !== "/start") {
this.props.history.push("/start")
}
else {
if ((moment().diff(this.state.backPressTimeStamp)) <= 1500) {
// this.setState({
// visible: false
// })
BackHandler.exitApp()
}
else {
this.setState({
backPressTimeStamp: moment(),
visible: true,
}, () => {
this.hideToast();
})
}
}
return true
}
the toast is returned by a function which is called inside the render method (ios = no backpress)
loadToast = () => {
if (Platform.OS === 'android') {
return (
this.state.visible && <View>
<Toast
visible={this.state.visible}
duration={ToastAndroid.SHORT}
gravity={ToastAndroid.BOTTOM}
x_offset={0}
y_offset={125}
message={"click again to close"}
/>
</View>
)
}
else {
return null
}
}
[....]
render() {
return(
...
{this.loadToast()}
...
)
}
Everything is working like it is suppose to, but i can't seem to figure out how to hide/close the Toast once the App is closed. It keeps being visible for the duration, no matter if the visible value is set to false / the hideToast function is called.
Any ideas on how to force the toast to hide/close once the App is closed would be highly appreciated!
Dave
The objective is to reuse the same screen ui with different content and still be able to handle back navigation(like how reddit app can show multiple user/feed screens as you click on them but still handle custom back navigation) using react native navigation v2?
trying to use dynamic screen id's and use them in state variables. I haven't come very far with this approach.
The inbuilt back button handles back navigation but consider the scenario as follows:
I am working on a form and I open another form, work on it, save it and have to return to the existing form. custom handlers do not allow it.
CODE:
HomeScreen:
Navigation.push(this.props.componentId, {
component: {
name: 'example.formScreen',
passProps: {
data: some props
},
options: {
topBar: {
title: {
text: 'form Screen'
}
}
}
}
});
in form screen:
<View>
<Button
title="save form"
onpress = ()=>{
Navigation.push(this.props.componentId, {
component: {
name: 'example.formScreen',
passProps: {
data: some other props
},
options: {
topBar: {
title: {
text: 'form Screen'
}
}
}
}
});
}/>
<Button
title="go back"
onPress={()=>Navigation.pop(this.props.componentID)}
/>
</View>
You can push instead of navigating to the screen in this way you can use same component with different data and can use the same screen.
You have to pass params along with navigation route while navigating to the screen and these params will have the data that will help to fill the container on the new screen.
The above Example is used when we are using react-navigation but in this example, I will explain about both(react-native-navigation, react-navigation) to pass params and the back button functionality will be the same as you can pop the previous route will navigating back.
react-native-navigation
Navigation.push(this.props.componentId, {
component: {
name: "ShowAnotherScreen",
passProps: {
data: item
}
}
})
react-navigation
this.props.navigation.push('YourScreenName', { YourParams })
If you want to go to the same screen and pass on the parameters, try rendering the current screen again on the current screen.
this.props.navigation.push('currentscreen',{param: "params"})
I am developing a React Native app with expo. One of the screens contains a graphic created with Highcharts. All points have an associated tooltip with some text, to which I would like to add a link that would open the URL in the browser (that is, outside the app).
Very basically, the app code looks like this:
import ChartView from 'react-native-highcharts';
render() {
let Highcharts = "Highcharts";
let config ={
chart: {
type: "line",
animation: Highcharts.svg,
...
tooltip: {
followTouchMove: false,
useHTML: true,
formatter: function () {
return `<div class="text">bla bla bla
<a href="http://www.google.cat">my link here/a>
</div>`;
}
},
};
That gets rendered in:
return(
<View style={styles.container}>
<ChartView
config={config}
/>
</View>
Checkin Link inside of a Highcharts tooltip I saw interesting ideas like adding this info inside the charts key:
events: {
click: function (event) {
var url = 'http://www.google.cat';
window.open(url, '_blank');
}
}
Which works, but it opens the link inside the ChartView of React Native. That is, the space with the graph shows the given URL. However, I want the URL to open in the browser.
Is there a way to open the links in the browser? React Native's Linking.openURL(url); is the way to do so, but I cannot see how can I bing Linking.openURL from within the config settings.
I solved it by using onMessage from the CharView:
return(
<View style={styles.container}>
<ChartView
onMessage={m => this.onMessage(m)}
config={config}
/>
</View>
This triggers this method to open the URL:
onMessage = (m) => {
let data = JSON.parse(m.nativeEvent.data);
Linking.openURL(data.url)
};
And the URL gets populated through a global variable window.myURL and sending the message with postMessage():
render() {
let Highcharts = "Highcharts";
let config ={
...
plotOptions: {
series: {
stickyTracking: false,
point: {
events: {
click: function(e) {
window.postMessage(JSON.stringify({'url': window.myUrl}));
}
}
}
},
},
tooltip: {
useHTML: true,
formatter: function () {
window.myUrl = extras.url;
return `<div class="text">bla bla bla
<a href="http://www.google.cat">my link here/a>
</div>`;
}
};
It works well on iOS, but not in Android.
I try to get which is not active (in term of NativeBase.io - https://docs.nativebase.io/Components.html#button-def-headref, which simply means that it has no background color) and after I click it, it becomes active (it has a background color).
I define button like this:
<Button active={this.state.selected} onPress={() => this.select()} first>
<Text>Puppies</Text>
</Button>
selected variable in my state is by default false. When I run the application, it works correctly.
The select() method is implemented:
select() {
this.setState({ selected: true })
}
I expect that after I click on the button, it should change its background but it isn't. I check the value of this.state.selected and it changes appropriately. What I'm doing wrong?
export default class MyComponent extends Component {
state = {
selected: false
}
handlePress = () => {
const { selected } = this.state;
this.setState({
selected: !selected,
})
}
render() {
const { selected } = this.state;
return (
<Button active={selected} onPress={this.handlePress} first>
<Text>Puppies</Text>
</Button>
);
}
}
I'm trying to stream video from the camera in a View with React Native. The problem is, if the user presses the home button, temporarily leave the app and switch back, the stream URL will be changed.
So I need to update the URL in a function similar to viewWillAppear as in native iOS framework. Any suggestion on this?
Yes #Danny Want is right you can use AppState. It can be used like this:
getInitialState: function() {
return {
currentAppState: AppState.currentState,
};
},
componentDidMount: function() {
AppState.addEventListener('change', this._handleAppStateChange);
},
componentWillUnmount: function() {
AppState.removeEventListener('change', this._handleAppStateChange);
},
_handleAppStateChange: function(currentAppState) {
this.setState({ currentAppState, });
},
render: function() {
return (
<Text>Current state is: {this.state.currentAppState}</Text>
);
},
Do what you wanna do in the AppState handler: _handleAppStateChange. For more details please check out here