We have the following code within I have the method createDrawerNavigator in my App.js file
const RootDrawer = createDrawerNavigator({
Home: { screen: HomeScreen },
Detail: { screen: DetailScreen },
Result: { screen: ResultScreen },
Section : { screen: SectionScreen }
},{
contentComponent : ({ navigation }) => (<SideBar navigation={navigation} />),
initialRouteName: 'Home',
navigationOptions: {
headerStyle: {
backgroundColor: '#26272d',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
},
transitionConfig: () => ({
transitionSpec: {
duration: 500,
easing: Easing.out(Easing.poly(4)),
timing: Animated.timing,
},
screenInterpolator: sceneProps => {
const { layout, position, scene } = sceneProps;
const { index } = scene;
const height = layout.initHeight;
const translateY = position.interpolate({
inputRange: [index - 1, index, index + 1],
outputRange: [height, 0, 0],
});
const opacity = position.interpolate({
inputRange: [index - 1, index - 0.99, index],
outputRange: [0, 1, 1],
});
return { opacity, transform: [{ translateY }] };
},
}),
});
And I have the screen SideBar that acts as Drawer:
import React, { Component, PureComponent } from 'react';
import { connect } from 'react-redux';
import { Image, StyleSheet, View, TouchableOpacity, Text, Linking } from 'react-native';
import { Icon } from 'native-base';
import {StackActions, NavigationActions, DrawerActions} from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';
export default class SideBar extends React.Component {
goTo = (section) => {
const resetAction = StackActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName: 'Section' })
]
})
return () => this.props.navigation.dispatch(resetAction);
}
render() {
return(
<View style={styles.container}>
<View>
<View style={styles.logo}><Image source={require('./images/ln-header-bg.jpg')} style={styles.ln_logo} resizeMode="contain" /></View>
<TouchableOpacity style={styles.link_menu} onPress={() => { this.goTo('all'); }}><Text style={styles.link_menu_text}>Últimas noticias</Text></TouchableOpacity>
<TouchableOpacity style={styles.link_menu} onPress={() => { this.goTo(68); }}><Text style={styles.link_menu_text}>La Nación</Text></TouchableOpacity>
<TouchableOpacity style={styles.link_menu} onPress={() => { this.goTo(69); }}><Text style={styles.link_menu_text}>El Mundo</Text></TouchableOpacity>
<TouchableOpacity style={styles.link_menu} onPress={() => { this.goTo(70); }}><Text style={styles.link_menu_text}>Gente</Text></TouchableOpacity>
<TouchableOpacity style={styles.link_menu} onPress={() => { this.goTo(97); }}><Text style={styles.link_menu_text}>#YoParticipo</Text></TouchableOpacity>
</View>
<View>
<Text style={styles.follow_social}>Síguenos en las redes</Text>
<View style={styles.follow_social_links}>
</View>
</View>
</View>
)
}
}
In the SideBar I want to call an function located in Home Component, I tried with react navigation dispacth method but doesn't working.
What I have to call the function or navigate to another screen? Can some help me please?
Thanks!
I never used drawers from react-navigation, but I would assume that the way they work is similar to stackNavigators. So, assuming that, what you could do was to set a navigation parameter in the Home screen, for example, inside the componentDidMount() method, like so:
this.props.navigation.setParams({ 'paramName': paramValue });
and then, in the drawer, in the componentWillMount() method, you could do something like:
const var_x = this.props.navigation.getParam('paramName', null);
This way, you can either send the function itself as a parameter, or send a reference to the Home screen, and then access its methods from the drawer.
ps: on both calls, paramName needs to be a string.
ps2: in the getParam method call, the second argument, in the example, null, is the default value in case there is not a value for the requested parameter.
Again, I use this method for stackNavigators, so you might take a look at the react-navigation documentation to double check if there is any difference for drawer: https://reactnavigation.org/docs/en/drawer-navigator.html#docsNav
Related
I created the Text To Speech function in React Native using the react-native-tts library on Android, but it always shows an error/warn like this
new NativeEventEmitter() was called with a non-null argument without the required addListener method.
new NativeEventEmitter() was called with a non-null argument without the required removeListeners method.
Here's an example from my code.
import React from 'react';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import {View, Text, SafeAreaView, TouchableOpacity} from 'react-native';
import Tts from 'react-native-tts';
const TextToVoiceScreen = ({route, navigation}) => {
const handleTextToSpeech = val => {
let stringSpace = val.split('').join(' ');
// Set Engine Voice
Tts.setDefaultEngine('com.google.android.tts');
Tts.getInitStatus().then(
() => {
Tts.stop();
Tts.setDucking(true);
Tts.setDefaultRate(0.09);
Tts.speak(stringSpace, {
androidParams: {
KEY_PARAM_PAN: -1,
KEY_PARAM_VOLUME: 0.9,
KEY_PARAM_STREAM: 'STREAM_MUSIC',
},
});
},
err => {
if (err.code === 'no_engine') {
Tts.requestInstallEngine();
console.log('Install Engine');
}
},
);
};
return (
<SafeAreaView>
<View>
<Text>Test Voice</Text>
<TouchableOpacity onPress={() => handleTextToSpeech('Hello World')}>
<View>
<MaterialCommunityIcons
name="text-to-speech"
color={'#33691e'}
size={20}
/>
</View>
</TouchableOpacity>
</View>
</SafeAreaView>
);
};
export default TextToVoiceScreen;
this is so annoying.
how fix this issues guys..
I have a context that contains an array, this context has a function that updates a certain value in that array:
import React, { createContext, useState } from 'react'
export const SliderValueContext = createContext()
export function SliderValueProvider({ children }) {
const [intensity, setIntensity] = useState([
{
EXAMPLE0: 0,
},
{
EXAMPLE1: 0,
},
{
EXAMPLE2: 0,
},
])
const updateCertainIntensity = (value, index) => {
console.log('Index: ' + index)
console.log('Value: ' + value)
let newIntensity = [...intensity]
newIntensity[index] = value
setIntensity(newIntensity)
}
return (
<SliderValueContext.Provider
value={{intensity, updateCertainIntensity}}>
{children}
</SliderValueContext.Provider>
)
}
I have a basic StackNavigator with both of my screens:
import React from 'react'
import { createStackNavigator } from '#react-navigation/stack'
import Index from './index'
import SliderScreen from './screen'
const Stack = createStackNavigator()
export default function MyStack() {
return (
<Stack.Navigator>
<Stack.Screen name='Index' component={Index}/>
<Stack.Screen name='SliderScreen' component={SliderScreen}/>
</Stack.Navigator>
)
}
This is how my index looks like:
import React from 'react'
import {
Button
} from 'react-native'
import { useNavigation } from '#react-navigation/native'
import { SliderValueProvider } from './context'
export default function Index() {
const navigation = useNavigation()
return (
<SliderValueProvider>
<Button title='YOU' onPress={() => navigation.navigate('SliderScreen')}></Button>
</SliderValueProvider>
)
}
App.js
export default function App() {
return (
<NavigationContainer>
<MyStack>
</MyStack>
</NavigationContainer>
)
}
Custom Slider component:
export default function SliderGroup({ id, text, borderColor }) {
const { updateCertainIntensity } = useContext(SliderValueContext)
return (
<View style={[styles.slider_container, { borderColor: borderColor }]}>
<View style={styles.slider_container_text}>
<Text style={styles.text_style}> {text} </Text>
{/* <Text style={styles.number_style}> </Text> */}
</View>
<View style={styles.slider_container_slider}>
<Slider
onValueChange={(value) => updateCertainIntensity(value, id)}
step={1}
minimumValue={0}
maximumValue={5}
maximumTrackTintColor='rgb(255, 255, 255)'
/>
</View>
</View>
)
}
Problem: Whenever I try to access the useContext in my custom Slider component, it says that the context is undefined undefined is not an object (evaluating useContext.updateCertainIntensity) .Other contexts however, work just fine, but they are not using objects, just simple strings. Does it have to do with using an object in useState()?
You aren't wrapping your app inside the context you just created.
In your App.jsx
<NavigationContainer>
<SliderValueProvider> {/* this one is going to feed its children with data */}
<MyStack /> {/* this will be fed by the parent component */}
</SliderValueProvider>
</NavigationContainer>
I am trying to fetch data through API. The data is returned in array, i parsed it to JSON and it shows perfectly in Console Log. But i can't show it on screen, the console shows following warning,
Warning: Encountered two children with the same key, 221. Keys should be unique so that components maintain
their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
This is my code:
import React from 'react';
import { Container, Header, Title, Drawer, Content, Button, Left, Right, Body, Text} from 'native-base';
import { Alert, View, TouchableOpacity, SafeAreaView } from 'react-native';
import { MaterialIcons } from '#expo/vector-icons';
import { Ionicons } from '#expo/vector-icons';
import SideBar from './components/SideBar';
import { FlatList } from 'react-native-gesture-handler';
export default class QrScan extends React.Component{
constructor(props) {
super(props)
this.state = {
resourcedata:'',
};
this.resourceAllocationList = this.resourceAllocationList.bind(this);
}
closeDrawer = () => {
this.drawer._root.close();
}
openDrawer = () => {
this.drawer._root.open();
}
resourceAllocationList() {
fetch('https://api.idepoz.com/ncl/api/getResource', {
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
}).then((response) => response.json())
.then((responseJson) => {
if(responseJson)
{
var jsonData = JSON.stringify(responseJson.data);
var resultdata = JSON.parse(jsonData);
//console.log(resultdata);
this.setState({resourcedata:resultdata});
}
}).catch((error) => {
console.error(error);
});
}
render()
{
const getHeader = () => {
return <Text>{'Resource Allocation'}</Text>;
};
const getFooter = () => {
if (this.state.loading) {
return null;
}
return <Text>{'Loading...'}</Text>;
};
return(
<Drawer
ref={(ref) => { this.drawer = ref; }}
content={<SideBar navigator={this.navigator} closeDrawer={this.closeDrawer} usertoken=
{this.props.navigation.state.params.usertoken} />}
onClose={() => this.closeDrawer()} >
<Container>
<Header>
<Left>
<Button transparent onPress={this.openDrawer.bind(this)}>
<MaterialIcons name="list" size={40} color="#FFFFFF" />
</Button>
</Left>
<Body>
</Body>
<Right>
<Button transparent>
<Ionicons name="search" size={40} color="#FFFFFF" onPress={() =>
Alert.alert('Search Button pressed')} />
</Button>
</Right>
</Header>
<Content>
<SafeAreaView style={{
flexDirection:"row",
justifyContent:'center',
marginTop: 20,
alignItems: 'center',
marginHorizontal: 20,
}}>
<TouchableOpacity onPress={this.resourceAllocationList}>
<Text>Press Here</Text>
<FlatList data={this.state.resourcedata}
renderItem={({ item }) => {
<Text>{ item.id }</Text>
}}
ListHeaderComponent={getHeader}
ListFooterComponent={getFooter}/>
</TouchableOpacity>
</SafeAreaView>
</Content>
</Container>
</Drawer>
);
}
}
Return Data in Console shows like below:
Array [
Object {
"allocation_space": 1,
"created_at": "2021-03-26 15:49:55",
"created_by": 1,
"date": "2021-04-19",
"deleted_at": null,
"deleted_by": null,
"duration": "01:00:00",
"employee_id": 2,
"end_time": "01:05:00",
"id": 73,
"is_active": 1,
"is_payable": 1,
"order_plan_id": 1,
"price": 13,
"resources_allocation_id": 73,
"serviceuser_id": 1,
"start_time": "00:05:00",
"status": "Approved",
"updated_at": "2021-04-19 07:56:08",
"updated_by": 1,
}.........
Can anyone help how to return above data on screen ?
Try adding extraData prop to Flatlist.
"By passing extraData={selected} to FlatList we make sure FlatList itself will re-render when the state changes. Without setting this prop, FlatList would not know it needs to re-render any items because it is a PureComponent and the prop comparison will not show any changes."
https://docs.expo.dev/versions/latest/react-native/flatlist/
Also adding "key" prop to your Flatlist Text element will take away the error if you don't have multiple same ids in your data. In that case you could use index as key, but this is not the best practice.
So changing your flatlist to...
<FlatList
data={this.state.resourcedata}
extraData={this.state.resourcedata}
renderItem={({ item }) => {
<Text key={item.id}>{ item.id }</Text>
}}
ListHeaderComponent={getHeader}
ListFooterComponent={getFooter
/>
Also I have used props like: initialNumToRender={8} windowSize={16} to reduce memory consumption but this depends on your use case and list size
More information about Flatlist props: https://docs.expo.dev/versions/latest/react-native/flatlist/
(This is my first answer to question so be merciful to me)
EDIT
If braces {} are used in renderItem={} there needs to be return ()
keyExtractor={(item, index) => index.toString()}
renderItem={({ item, index }) => {
return (
<Text key={index }>{ item.id }</Text>
);
}}
Otherwise you could use normal braces () in renderItem which would look like...
keyExtractor={(item, index) => index.toString()}
renderItem={({ item, index }) => (
<Text key={index}>{ item.id }</Text>
)
}
I usually use {} and return as then I can even put logic before return () statement like console.log()
I have added react-navigation-drawer for implementing drawer navigation in my app. I have created a file named PrimaryNav.js and added all navigation code in it.
import Login from './components/Login';
import Employee from './pages/Employee';
import { createAppContainer,SafeAreaView, } from 'react-navigation'
import { createDrawerNavigator, DrawerItems } from 'react-navigation-drawer';
import React from 'react';
const Primary_Nav = createDrawerNavigator({
Login: {
screen: Login,
navigationOptions: {
drawerLabel: () => null
}
},
Home_kitchen: {
screen: Home_kitchen,
navigationOptions: {
drawerLabel: "Home"
}
},
Employee: {
screen: Employee,
navigationOptions:{
drawerLabel:"Employee",
}
},
},{
initialRouteName:'Login',
drawerPosition: 'left',
drawerType: "slide",
}
});
const PrimaryNav = createAppContainer(Primary_Nav);
export default PrimaryNav;
Something like above. I have called this file in the App.js, the issue I am facing is I need to set a drawer item based on the role which the user has. So if the user role is cashier he should not be able to see all the menu.
All the pages are coming properly in the drawer menu but the question is how should I want to manage menu role wise in my app and changed the menu based on the roles of the user?
hi I saw your issue and I am trying to helping you.
I have make a custom design for drawer components .
-firstly you can create a extra file for drawer Design like DrawerComponent.js
and import in your code where you are create a drawer navigator
import DrawerComponent from "./DrawerComponent";
const Primary_Nav = createDrawerNavigator(
{
Login: {
screen: Login,
navigationOptions: {
drawerLabel: () => null
}
},
Home_kitchen: {
screen: Home_kitchen,
navigationOptions: {
drawerLabel: "Home"
}
},
Employee: {
screen: Employee,
navigationOptions: {
drawerLabel: "Employee"
}
}
},
{
initialRouteName: "Login",
drawerPosition: "left",
drawerType: "slide",
contentComponent: DrawerComponent // i added this DrawerComponent
}
);
const PrimaryNav = createAppContainer(Primary_Nav);
export default PrimaryNav;
now in the DrawerComponent.js
import React, { Component } from "react";
import { Text, View, TouchableOpacity } from "react-native";
export default class DrawerComponent extends Component {
constructor(props) {
super(props);
this.state = {
role: 1 // i used 1 for cashier and 0 for chef
};
}
render() {
const { role } = this.state;
const { navigation } = this.props;
return (
<View style={{ flex: 1, paddingVertical: 40, paddingHorizontal: 20 }}>
<TouchableOpacity
style={{ margin: 20 }}
onPress={() => navigation.navigate("Home_kitchen")}
>
<Text>Home</Text>
</TouchableOpacity>
{role ? (
<TouchableOpacity
style={{ margin: 20 }}
onPress={() => navigation.navigate("Employee")}
>
<Text>Employee</Text>
</TouchableOpacity>
) : null}
</View>
);
}
}
if you are change the role to 0 then the Employee tab is disable in Drawer Navigator I have user the ternary operator for conditions. you can modify is as you can want. hope it will helpful for you.
I have my side menu via DrawerNavigator. I know that to customize the drawer, it's in "contentComponents" props.
I want for example, put a button who open a modal like : Share (to share the app on other social media)
But for now, all my button are route. So if I click on it, it's redirect to the page (normal). I just want to add a button who react and not redirect.
I don't know how to custom that in the Component dynamically. I think about hardcoded each button (some for redirect, some for display simple modal).
Here is my code :
index.android.js
const DrawerContent = (props) => (
<ScrollView>
<View style={styles.container}>
<Text style={styles.logo}>TechDico</Text>
<Text style={{ paddingLeft: 10, paddingRight: 10, fontSize: 13, textAlign: 'center', color: '#f4f4f4' }}>Des millions de traductions classées par domaine d'activité</Text>
</View>
<DrawerItems style={{ marginTop: 30 }} {...props} />
</ScrollView>
)
const appNavigator = DrawerNavigator({
Redirection1: {
screen: Index,
navigationOptions: {
drawerLabel: 'Redirection1',
drawerIcon: ({ tintColor }) => (<Icon name="home" size={20} color={tintColor} />),
}
},
DisplayModal: {
screen: Index,
navigationOptions: {
drawerLabel: 'DisplayModal',
drawerIcon: ({ tintColor }) => (<Icon name="home" size={20} color={tintColor} />),
}
},
Redirection2: {
screen: Index,
navigationOptions: {
drawerLabel: 'Redirection2',
drawerIcon: ({ tintColor }) => (<Icon name="home" size={20} color={tintColor} />),
}
}, }, {
// define customComponent here
contentComponent: DrawerContent,
contentOptions: {
inactiveTintColor: '#000000',
activeTintColor: '#1eacff',
showIcon: true,
}
});
Index class
export default class Index extends Component {
renderRoot = () => {
const { navigation } = this.props;
console.log("My Navigation ", navigation);
switch (navigation.state.key) {
case 'Redirection1':
return (
<App navigation={navigation} />
);
case 'DisplayModal':
// TODO I don't want to return so I can remove to cancel the redirection, but now, how can I display a modal without redirect.
return (
<DisplayModal navigation={navigation} />
);
case 'Redirection2':
return (
<Redirection2 navigation={navigation} />
);
default:
return (
<Test navigation={navigation} />
);
}
}
I'm using 'react-navigation'.
I'm looking at the same task as well. I think having multiple routes pointing to the same screen type may cause eventually a mess with state management, as each screen instance is different.
Looking at the source code in DrawerSidebar/DrawerNavigatorItems it seems all items in the sidebar list are those found in drawer's route config (unless we rewrite completely DrawerNavigatorItems). So maybe we may have a fake screen for some route and in componentWillMount implement required action and then navigate to the default route.
Here is a sample code:
let drawer = DrawerNavigator({
Main: {
screen: MainScreen,
},
About: {
screen: AboutScreen,
},
ContactUs: {
screen: ContactUsFakeScreen,
},
});
const mailUrl = "mailto:test#test.com";
class ContactUsFakeScreen extends React.Component {
componentWillMount() {
let self = this;
Linking.canOpenURL(mailUrl)
.then(self.openEmail)
.catch(err => self.openEmail(false));
}
openEmail(supported) {
if (supported) {
Linking.openURL(mailUrl).catch(err => {});
}
let { navigation } = this.props;
navigation.navigate('Main');
}
render() {
return null;
}
}
Here Main/MainScreen and About/AboutScreen are regular routes and screens, while ContactUs/ContactUsFakeScreen only pretend to be a route and a screen. Clicking on ContactUs will trigger componentWillMount which deals with email screen and then eventually navigates to the MainScreen (Main route).
Another approach could be to hijack getStateForAction from drawer router and put some extra routing logic there replacing destination route on the fly. Something along these lines:
const defaultDrawerGetStateForAction = drawer.router.getStateForAction;
drawer.router.getStateForAction = (action, state) => {
let newState = defaultDrawerGetStateForAction(action, state);
if (action.type === 'Navigation/NAVIGATE' && action.routeName === 'ContactUs') {
// extra logic here ...
newState.routes.forEach(r => {
if (r.key === 'DrawerClose') {
// switching route from ContactUs to Main.
r.index = 0;
}
});
}
return newState;
}
And if an item in the drawer list is not even actionable (like copyright), then fake screen will look even simpler (note styling via navigationOptions):
let drawer = DrawerNavigator({
...
Copyright: {
screen: Copyright,
},
});
class Copyright extends React.Component {
static navigationOptions = {
drawerLabel: ({ tintColor, focused }) =>
(<Text style={{color: '#999'}}>Copyright 2017</Text>)
)
};
componentWillMount() {
let { navigation } = this.props;
navigation.navigate('Main');
}
render() {
return null;
}
}