The following function open the map in driver mode. Is there any option available to set up map mode like driver, transport etc.
startNavigation(url) {
Linking.canOpenURL(url).then(supported => {
if (supported) {
Linking.openURL(url);
} else {
console.log('Don\'t know how to open URI: ' + url);
}
});
}
Check this sample code
import React, {
Component
} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Linking,
TouchableHighlight,
} from 'react-native';
class StackOverflow extends Component {
startNavigation(url) {
Linking.canOpenURL(url).then(supported => {
if (supported) {
Linking.openURL(url);
} else {
console.log('Don\'t know how to open URI: ' + url);
}
});
}
_onPressButton(mode) {
//driving d
//walking walking
//bicycling bicycle
//transit transit
this.startNavigation("google.navigation:q=American Century Investments&mode="+mode);
}
render() {
return (
<View style={styles.container}>
<TouchableHighlight onPress={this._onPressButton.bind(this,'d')}>
<Text>Driving</Text>
</TouchableHighlight>
<TouchableHighlight onPress={this._onPressButton.bind(this,'walking')}>
<Text>Walking</Text>
</TouchableHighlight>
<TouchableHighlight onPress={this._onPressButton.bind(this,'bicycle')}>
<Text>Bicycle</Text>
</TouchableHighlight>
<TouchableHighlight onPress={this._onPressButton.bind(this,'transit')}>
<Text>Transit</Text>
</TouchableHighlight>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
AppRegistry.registerComponent('StackOverflow', () => StackOverflow);
Verified in Android device
Related
I have the following code:
import React from 'react';
import {StyleSheet, View} from 'react-native';
interface MyButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
dataCode: string;
}
class MyButton extends React.Component<
MyButtonProps & React.HTMLProps<HTMLButtonElement>,
{}
> {
render() {
return <button {...this.props} />;
}
}
const App = () => {
const _onPressButton = (event: any) => {
let params: string = (event.currentTarget as MyButton).props.dataCode;
fetch(`http://10.18.1.19/switch?${params}`);
};
return (
<View style={styles.container}>
<View style={styles.buttonContainer}>
<MyButton
dataCode="binary=111111111111111111111111&protocol=1&pulselength=3"
onClick={_onPressButton}
title="Test"
/>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
buttonContainer: {
margin: 20,
},
});
export default App;
and I have error message when I use button ws. Button.
ReactNativeJS: Invariant Violation: View config getter callback for
component button must be a function (received undefined). Make
sure to start component names with a capital letter.
How can I extend a HTML button element?
I need to have some items dynamically in my app's drawer after some categories get fetched from a json file (https://www.rallyssimo.it/wp-json/wp/v2/categories)
json example (I need that information)
[
{
"id": 44,
.
.
"name": "ALTRI RALLY",
.
.
},
Tis is the drawer:
const CustomDrawerComponent = (props) => (
<SafeAreaView style={{flex:1}}>
<View style={{height:80, backgroundColor: 'white', alignItems: 'center', justifyContent: 'center'}}>
<Image
source={{uri: 'https://www.rallyssimo.it/wp-content/uploads/2016/08/rallyssimo-logo.png'}}
style={{ height: 60, width: 180}}
/>
</View>
<ScrollView>
<DrawerItems {...props} />
</ScrollView>
</SafeAreaView>
)
const AppNavigator = createDrawerNavigator(
{
Home: DashboardStackNavigator,
},
{
contentComponent: CustomDrawerComponent
}
);
const AppContainer = createAppContainer(AppNavigator);
//Main class
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
How can I put the items (I'm going to get from the JSON) in the drawer?
As you have noticed, you need to create your own custom drawer to achieve this, which is done with contentComponent: CustomDrawerComponent.
Now you cannot use DrawerItems within CustomDrawerComponent since you want full control on the items listed. But you can recreate the items yourself using basic and elements.
Finally you need to fetch the API and store the data in your state in order to render the result as a list in the drawer.
Here is a basic example for :
import React, { Component } from 'react';
import { ScrollView, Text, View, Image } from 'react-native';
import { NavigationActions } from 'react-navigation';
class CustomDrawerComponent extends Component {
constructor(props) {
super(props);
this.state = { data: null };
}
async componentDidMount() {
fetch('https://www.rallyssimo.it/wp-json/wp/v2/categories')
.then(res => res.json())
.then(data => this.setState({ data }))
}
navigateToScreen(routeName, params) {
return () => { this.props.navigation.dispatch(NavigationActions.navigate({ routeName, params })) };
}
render() {
if (this.state.data === null) {
return <Text>...</Text>;
}
return (
<View style={{ flex: 1, paddingTop: 30 }}>
<View style={{height:80, backgroundColor: 'white', alignItems: 'center', justifyContent: 'center'}}>
<Image
source={{uri: 'https://www.rallyssimo.it/wp-content/uploads/2016/08/rallyssimo-logo.png'}}
style={{ height: 60, width: 180}}
/>
</View>
<ScrollView>
<View>
{this.state.data.map(x => (
<Text
key={x.id}
style={{ fontSize: 16, lineHeight: 30, textAlign: 'center' }}
onPress={this.navigateToScreen('page2')}
>
{x.name}
</Text>
))}
</View>
</ScrollView>
</View>
);
}
}
export default CustomDrawerComponent;
And here is a working snack.
import React, { Component } from 'react';
import {
ScrollView,
StyleSheet,
} from 'react-native';
import axios from 'axios';
import CarDetail from '../components/CarDetail';
class CarList extends Component {
state = { cars: [] };
componentDidMount() {
axios.get('https://www.website.com/ajx/home_ajx/lister')
.then(response => this.setState({ cars: response.data.data[0]['S1']
}));
//Add an if statement here to notify the user when the request fails
}
renderCars() {
return this.state.cars.map(model =>
<CarDetail key={model.title} modelprop={model} />
);
}
render() {
console.log(this.state);
return (
<ScrollView>
{this.renderCars()}
</ScrollView>
);
}
}
export default CarList;
And the image path in the JSON file is as below:
"image": "data/models/peugeot-2008-138twf_600X400_.jpg",
Below is where I'm calling the image in another component
const CarDetail = ({ modelprop }) => {
const { image } = modelprop;
return (
<Card>
<CardSection>
<View>
<Image style={imageStyle}
source={{ uri: props.modelprop.image }}
/>
</View>
I believe I need to use some kind of prefix maybe in my Global.js which I couldn't find or figure out.
Any help is highly appreciated.
Mostly like your code has a bug:
const CarDetail = ({ modelprop }) => {
const { image } = modelprop;
return (
<View>
<Image
style={imageStyle}
source={{ uri: image }}
/>
</View>
);
}
If the image is something like data/models/peugeot-2008-138twf_600X400_.jpg, you should use `${Global.imageUrlPrefix}${image}` to concat all.
i am using a PhotoGrid Library in react native to populate the list of photo on my apps. how to call a function from the render function ? it show this error when i call a function called "deva" on my OnPress method in <Button onPress={()=>{this.deva()}}><Text>Bondan</Text></Button> . here is my code...
import React from 'react';
import { StyleSheet, Text, View, WebView, TouchableOpacity, Image, Alert, Dimensions} from 'react-native';
import {DrawerNavigator} from 'react-navigation'
import {Container, Header, Button, Icon, Title, Left, Body, Right, Content} from 'native-base'
import PhotoGrid from 'react-native-photo-grid'
import HomeScreen from './HomeScreen'
export default class Recomended extends React.Component {
constructor() {
super();
this.state = { items: [],
nama : ""
}
}
goToBufetMenu(){
this.props.navigation.navigate("BufetMenu");
}
componentDidMount() {
// Build an array of 60 photos
let items = Array.apply(null, Array(60)).map((v, i) => {
return { id: i, src: 'http://placehold.it/200x200?text='+(i+1) }
});
this.setState({ items });
//this.setState({ nama: "Bondan"});
//this.props.navigation.navigate("BufetMenu");
}
deva() {
Alert.alert('deva');
}
render() {
return (
<Container style={styles.listContainer}>
<PhotoGrid
data = { this.state.items }
itemsPerRow = { 3 }
itemMargin = { 3 }
renderHeader = { this.renderHeader }
renderItem = { this.renderItem }
style={{flex:2}}
/>
</Container>
);
}
renderHeader() {
return(
<Button onPress={()=>{this.deva()}}><Text>Bondan</Text></Button>
);
}
renderItem(item, itemSize) {
return(
<TouchableOpacity
key = { item.id }
style = {{ width: itemSize, height: itemSize }}
onPress = { () => {
this.deva();
}}>
<Image
resizeMode = "cover"
style = {{ flex: 1 }}
source = {{ uri: item.src }}
/>
<Text>{item.src}</Text>
</TouchableOpacity>
)
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
height: 587,
},
gridText: {
color: '#fff',
textAlign: 'center',
fontStyle: 'normal',
fontSize : 12
},
listContainer: {
height: Dimensions.get('window').height - (Dimensions.get('window').height*53/100),
}
});
You are loosing context of this. You need to either use arrow functions or bind the functions.
Example
constructor() {
super();
this.state = { items: [],
nama : ""
};
this.renderHeader = this.renderHeader.bind(this);
this.renderItem = this.renderItem.bind(this);
}
OR
renderHeader = () => {
// rest of your code
}
renderItem = (item, itemSize) => {
// rest of your code
}
Either change your deva method definition to an arrow function -
deva= () => {
Alert.alert('deva');
}
Or bind the deva method to this inside your constructor
constructor() {
super();
this.state = { items: [],
nama : ""
}
this.deva = this.deva.bind(this)
}
You get the error because when the deva method is invoked using this.deva(), the javascript runtime cannot find the property/function deva on the this it's called with (which is the anonymous callback passed to onPress in this case). But if you bind this to deva beforehand, the correct this is being searched by the javascript runtime.
I hooked up the react-native-tab-navigator to a redux reducer using react-native-navigation-redux-helpers. When I press on a tab, the reducer changes the current tab state inside of the redux store. However, there is a lag between when I tap on a tab and when the tab is "selected" and renders the component. Is there any way to speed up the process of selecting a tab and rendering the view?
Here is my ApplicationTabs component:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { actions as navigationActions } from 'react-native-navigation-redux-helpers';
import { Tabs, Tab, Icon } from 'react-native-elements';
import Feed from '../feed';
import Inbox from '../inbox';
import { openDrawer } from '../../actions/drawer';
import styles from './styles.js';
const { jumpTo } = navigationActions;
class ApplicationTabs extends Component {
constructor(props) {
super(props)
}
_openDrawer() {
this.props.openDrawer();
}
_renderTabContent(tab) {
switch (tab.key) {
case 'feed':
return <Feed />;
case 'request':
return <Inbox />
default:
return <Feed />;
}
}
_changeTab (tab) {
const { tabs } = this.props;
this.props.jumpTo(tab.key, tabs.key)
}
render() {
const { tabs, drawerState } = this.props;
const children = tabs.routes.map((tab, i) => {
return (
<Tab
selected={tabs.index === i}
title={tab.title}
renderIcon={() => <Icon containerStyle={styles.iconContainer} iconStyle={styles.iconStyle} type='Entypo' name={tab.iconName} size={33} />}
onPress={() => this._changeTab(tab)}
titleStyle={styles.titleStyle}>
{this._renderTabContent(tab)}
</Tab>
)
});
return (
<Tabs tabBarStyle={styles.tabBarStyle}>
<Tab
selected={drawerState === 'opened'}
title='Menu'
renderIcon={() => <Icon containerStyle={styles.iconContainer} iconStyle={styles.iconStyle} type='Entypo' name='menu' size={33} />}
onPress={() => this._openDrawer()}
titleStyle={styles.titleStyle}>{this._renderTabContent(tabs.key)}</Tab>
{children}
</Tabs>
);
}
}
function mapDispatchToProps(dispatch) {
return {
jumpTo: (keyOrIndex, key) => dispatch(jumpTo(keyOrIndex, key)),
openDrawer: () => dispatch(openDrawer()),
};
}
function mapStateToProps(state) {
return {
tabs: state.tabs,
drawerState: state.drawer.drawerState
}
}
export default connect(mapStateToProps, mapDispatchToProps)(ApplicationTabs);
Here is the tabReducer:
import { tabReducer } from 'react-native-navigation-redux-helpers';
const tabs = {
routes: [
{ key: 'feed', title: 'Feed', iconName:'home'},
{ key: 'request', title: 'Request', iconName: 'camera-alt' },
{ key: 'memoryBox', title: 'Memory Box', iconName: 'photo' },
{ key: 'search', title: 'Search', iconName: 'search' }
],
key: 'ApplicationTabs',
index: 0
};
export default tabReducer(tabs);