React Native Component Not Rendering - javascript

I have two classes, ActivityList, and ActivityDetail. ActivityList queries for some data and then calls ActivityDetail with the information it receives. I console logged the information and checked to see if it is coming in the desired form. It is. However, for some reason ActivityDetal is not rendering into ActivityList.
ActivityList.js
import React, { Component } from 'react';
import { ScrollView } from 'react-native';
import firebase from 'firebase';
import ActivityDetail from './ActivityDetail';
import { getCurrentUser } from '../../models/User';
class ActivityList extends Component {
getActivityList() {
getCurrentUser()
.then(currentUser => currentUser.teacherList.map(batch => firebase.database().ref(`/batches/${batch}`)
.once('value')
.then(Class => firebase.database().ref(`/users/teachers/${Class.val().Teacher}`)
.once('value')
.then(teacher => this.renderActivityList(teacher.val())))));
}
renderActivityList(teacher) {
console.log(teacher);
return <ActivityDetail key={teacher.Name} person={teacher} />;
}
render() {
return (
<ScrollView>
{this.getActivityList()}
</ScrollView>
);
}
}
export { ActivityList };
ActivityDetail.js
import React from 'react';
import { Text, Image, View, Dimensions } from 'react-native';
import { Card, CardSection } from './';
const { width } = Dimensions.get('window');
const ActivityDetail = ({ person }) => {
console.log('working');
return (
<Card style={{ flex: 1, flexDirection: 'row' }}>
<CardSection>
<Image style={styles.headerStyle} source={{ uri: person.Header }} />
<View style={styles.containerStyle}>
<Image style={styles.profileStyle} source={{ uri: person.Profile }} />
</View>
<View style={{ width: 0.93 * width, height: 0.09 * width }} />
</CardSection>
<CardSection>
<View style={styles.textContainerStyle}>
<Text style={styles.nameStyle}>{person.Name}</Text>
<Text style={styles.classStyle}>{person.Subject}</Text>
</View>
</CardSection>
</Card>
);
};
const styles = {
profileStyle: {
height: 0.13 * width,
width: 0.13 * width,
alignSelf: 'center',
resizeMode: 'cover',
},
containerStyle: {
width: 0.18 * width,
height: 0.18 * width,
borderRadius: (0.18 * width) / 2,
backgroundColor: '#d5d5d5',
paddingLeft: 5,
paddingRight: 5,
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center',
top: 65,
position: 'absolute',
},
nameStyle: {
fontSize: 20,
color: '#000',
paddingBottom: 5,
},
headerStyle: {
width: 0.93 * width,
height: 0.25 * width,
borderRadius: 4,
flex: 2,
},
textContainerStyle: {
justifyContent: 'center',
alignItems: 'center',
flex: 1,
},
classStyle: {
fontSize: 18,
color: '#aaa',
},
};
export default ActivityDetail;

The problem here is that in your ActivityList component's render function, you are rendering the result of this.getActivityList, which is always gonna be undefined.
You should instead trigger the data fetch in componentWillMount and use setState to set the data to the component state for rendering.
e.g.
class ActivityList extends Component {
constructor(props) {
super(props);
this.state = { teacher: {} };
}
componentWillMount() {
this.getActivityList();
}
getActivityList() {
... // get Data
this.setState({ teacher : data });
}
render() {
return (
<ScrollView>
<ActivityDetail key={this.state.teacher.Name} person={this.state.teacher} />
</ScrollView>
);
}
}

Related

How I can find variable: Name in react-native?

I'm trying to pass the 'data' to other archive (CampaignList.js > Campaign.js) but I don't now why the variable is not pass to Campaign.js function. I watched some videos on YouTube and read some forums and nothing help.
CampaignList.js
import React from 'react';
import {
StyleSheet,
Dimensions,
View,
Text,
TouchableOpacity,
FlatList
} from 'react-native';
import Campaign from './Campaign';
var deviceWidth = Dimensions.get('window').width;
var deviceHeight = Dimensions.get('window').height;
const App: () => React$Node = () => {
return (
<>
<View style={styles.screen}>
<FlatList
style={styles.scroll}
contentContainerStyle={{ paddingHorizontal: 20 }}
showsVerticalScrollIndicator={false}
keyboardShouldPersistTaps="handled"
data={[
{
id: 1,
name: 'Peregrino da Alvorada'
}
]}
keyExtractor={(item) => String(item.id)}
renderItem={({ item }) => <Campaign data={item} />}
/>
<TouchableOpacity>
<View style={styles.button}>
<Text style={styles.text}>ADICIONAR CAMPANHA</Text>
</View>
</TouchableOpacity>
</View>
</>
);
};
const styles = StyleSheet.create({
screen: {
flex: 1,
flexDirection: 'column'
},
scroll: {
marginHorizontal: deviceWidth * 0.05,
marginVertical: deviceHeight * 0.025,
height: deviceHeight * 0.6,
borderWidth: 1,
borderColor: 'black'
},
button: {
marginHorizontal: deviceWidth * 0.05,
marginVertical: deviceHeight * 0.025,
width: deviceWidth * 0.9,
height: deviceHeight * 0.1,
backgroundColor: '#6a0301',
alignItems: 'center',
justifyContent: 'center'
},
text: {
color: 'white',
fontWeight: 'bold'
}
});
export default App;
My idea is pass the data to here to create a query with RealmDB but the MetroServer returt an error "Can't find variable: Name" in the Campaign.js:
Campaign.js
import React from 'react';
import { View, StyleSheet } from 'react-native';
export default function Campaign({ data }) {
return (
<View>
<Name>{data.name}</Name>
<Id>{data.id}</Id>
</View>
);
}
const styles = StyleSheet.create({
name: {
fontSize: 50,
color: 'black'
},
id: {
fontSize: 10,
color: 'grey'
}
});
You should be using Text for displaying your text components, or else you can create two different components named Name and Id ( not at all required in this use case) to display the items
import React from 'react';
import {View, StyleSheet,Text} from 'react-native';
export default function Campaign({ data }) {
return(
<View>
<Text>{data.name}</Text>
<Text>{data.id}</Text>
</View>
);
}
const styles = StyleSheet.create({
name: { fontSize: 50, color: 'black' },
id: { fontSize: 10, color: 'grey' },
});
In the original question, you were trying to use undefined components Name and Id.

Adding a DOM element with the press of a button in react native

I want to be able to add a <Text> element with the press of a button in react native
Is this possible to make ? and how can i do it ?
my code :
import React, { Component } from 'react'
import { StyleSheet, Text, View, Button } from 'react-native'
export default class App extends Component {
onPress = () => {
//some script to add text
}
render() {
return (
<View style = { styles.container }>
<View style = { styles.ButtonContainer }>
//i want to add text here
<Button
onPress={this.onPress}
title="Add item"
color="#FB3640"
accessibilityLabel="Add item"
containerViewStyle={{width: '100%', marginLeft: 0}}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between',
backgroundColor: '#fff',
alignItems: 'center',
},
text: {
marginTop: 100,
},
ButtonContainer: {
margin: 20,
width: '90%',
}
});
Thank you !
You need to define a piece of state and initialized it with false. When the user presses the button you have to switch this piece of state to true. Have a look here for more information about the local state: https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class
Something like that should work:
import React, { Component } from 'react'
import { StyleSheet, Text, View, Button } from 'react-native'
export default class App extends Component {
state = {
displayText: false
}
onPress = () => {
this.setState({ displayText: true });
}
render() {
return (
<View style = { styles.container }>
<View style = { styles.ButtonContainer }>
{displayText && <Text>This is my text</Text>}
<Button
onPress={this.onPress}
title="Add item"
color="#FB3640"
accessibilityLabel="Add item"
containerViewStyle={{width: '100%', marginLeft: 0}}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between',
backgroundColor: '#fff',
alignItems: 'center',
},
text: {
marginTop: 100,
},
ButtonContainer: {
margin: 20,
width: '90%',
}
});

Check the render method of CartItem

Hi there I am trying to follow tutorial but it gives this check render method error. I am making Cart for shopping app
Here is CartScreen:
import React from 'react';
import { View, Text, FlatList, Button, StyleSheet } from 'react-native';
import { useSelector } from 'react-redux';
import Colors from '../../constants/Colors';
import CartItem from '../../components/shop/CartItem';
const CartScreen = props => {
const cartTotalAmount = useSelector(state => state.cart.totalAmount);
const cartItems = useSelector(state => {
const transformedCartItems = [];
for (const key in state.cart.items) {
transformedCartItems.push({
productId: key,
productTitle: state.cart.items[key].productTitle,
productPrice: state.cart.items[key].productPrice,
quantity: state.cart.items[key].quantity,
sum: state.cart.items[key].sum
});
}
return transformedCartItems;
});
return (
<View style={styles.screen}>
<View style={styles.summary}>
<Text style={styles.summaryText}>
Total:{' '}
<Text style={styles.amount}>${cartTotalAmount.toFixed(2)}</Text>
</Text>
<Button
color={Colors.accent}
title="Order Now"
disabled={cartItems.length === 0}
/>
</View>
<FlatList data={cartItems}
keyExtractor={item => item.productId}
renderItem={itemData => (
<CartItem
quantity={itemData.item.quantity}
title={itemData.item.productTitle}
amount={itemData.item.sum}
onRemove={() => {}}
/>
)}
/>
</View>
);
};
const styles = StyleSheet.create({
screen: {
margin: 20
},
summary: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
marginBottom: 20,
padding: 10,
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: { width: 0, height: 2 },
shadowRadius: 8,
elevation: 5,
borderRadius: 10,
backgroundColor: 'white'
},
summaryText: {
fontSize: 18
},
amount: {
color: Colors.primary
}
});
export default CartScreen;
And Here is my CartItem Component :
import React from 'react';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
Platform
} from 'react-native';
import { Ionicons } from 'react-native-vector-icons';
const CartItem = props => {
return (
<View style={styles.cartItem}>
<View style={styles.itemData}>
<Text style={styles.quantity}>{props.quantity} </Text>
<Text style={styles.mainText}>{props.title}</Text>
</View>
<View style={styles.itemData}>
<Text style={styles.mainText}>${props.amount.toFixed(2)}</Text>
<TouchableOpacity onPress={props.onRemove} style={styles.deleteButton}>
<Ionicons
name={'ios-trash'}
size={23}
color="red"
/>
</TouchableOpacity>
</View>
</View>
);
};
const styles = StyleSheet.create({
cartItem: {
padding: 10,
backgroundColor: 'white',
flexDirection: 'row',
justifyContent: 'space-between',
marginHorizontal: 20
},
itemData: {
flexDirection: 'row',
alignItems: 'center'
},
quantity: {
color: '#888',
fontSize: 16
},
mainText: {
fontSize: 16
},
deleteButton: {
marginLeft: 20
}
});
export default CartItem;
I have copy paste the component inside the cart screen it works but as a component it does not work what should I do ?
What could be wrong here ?
Image of Error
I think you can try to change the way import your icons
import { Ionicons } from 'react-native-vector-icons';
It should be
import Ionicons from 'react-native-vector-icons/Ionicons'

React Native: Touchable Opacity element is clickable on iOS but not Android

I'm working on a React Native app with a typeahead component. The typeahead displays options that overlay other content on the route (see right image below). When a user clicks one of those options, an onPress listener runs a function:
This all works just fine on iOS. On Android though, the onPress event is never received. Even more strangely, when I try to click on an option lower in the list (like Boston, MA, USA), the onPress event is received by the card below the pressed option (Djerba).
Does anyone know what might cause this behavior? I'd be super grateful for any insights others can offer on this query.
Here's the code for the Explore view and the typeahead components.
Explore.js
import React from 'react'
import { connect } from 'react-redux'
import { Text, View, ScrollView, TouchableOpacity } from 'react-native'
import { gradients, sizing } from '../../style'
import { LinearGradient } from 'expo-linear-gradient'
import { MountainHero } from '../Heros'
import { CardRow } from '../Card'
import Loading from '../Loading'
import { setExploreSearch, onExploreTypeaheadClick } from '../../actions/locations'
import { Typeahead } from '../Typeahead'
const styles = {
container: {
flex: 1,
flexDirection: 'column',
},
scrollView: {
paddingBottom: sizing.margin,
},
loadingContainer: {
position: 'absolute',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
zIndex: 100,
elevation: 100,
top: 53,
width: '100%',
},
typeahead: {
margin: sizing.margin,
marginBottom: 0,
width: sizing.screen.width - (2*sizing.margin),
zIndex: 100,
elevation: 100,
}
}
const Explore = props => {
const { authenticated: a, spotlight, loading } = props;
let r = (a.recommendedLocations || []);
if (!r || !spotlight) return null;
// remove spotlight locations from the recommended locations
const ids = spotlight.map(i => i.guid);
const recommended = r.filter(i => ids.indexOf(i.guid) == -1);
return (
<LinearGradient style={styles.container} colors={gradients.teal}>
<ScrollView contentContainerStyle={styles.scrollView}>
{loading && (
<View style={styles.loadingContainer}>
<Loading />
</View>
)}
<MountainHero text='Explore' />
<Typeahead
style={styles.typeahead}
placeholder='Search Cities'
value={props.exploreSearch}
onChange={props.setExploreSearch}
vals={props.exploreTypeahead}
valKey={'place_id'}
onTypeaheadClick={props.onExploreTypeaheadClick}
/>
<CardRow
text='Explore Places'
cards={recommended}
type='location' />
<CardRow
text='In the Spotlight'
cards={spotlight}
type='location' />
</ScrollView>
</LinearGradient>
)
}
const mapStateToProps = state => ({
authenticated: state.users.authenticated,
spotlight: state.locations.spotlight,
exploreSearch: state.locations.exploreSearch,
exploreTypeahead: state.locations.exploreTypeahead,
loading: state.locations.loading,
})
const mapDispatchToProps = dispatch => ({
setExploreSearch: s => dispatch(setExploreSearch(s)),
onExploreTypeaheadClick: val => dispatch(onExploreTypeaheadClick(val)),
})
export default connect(mapStateToProps, mapDispatchToProps)(Explore)
Typeahead.js
import React from 'react'
import { Text, View, TouchableOpacity } from 'react-native'
import { sizing, GradientInput } from '../style'
const styles = {
container: {
position: 'absolute',
zIndex: 100,
elevation: 100,
height: 400,
width: '100%',
},
input: {
width: '100%',
borderRadius: 0,
},
typeaheadContainer: {
position: 'absolute',
zIndex: 100,
elevation: 100,
top: 55,
width: '100%',
},
typeaheadRow: {
padding: 10,
paddingTop: 12,
paddingBottom: 12,
borderWidth: 1,
borderColor: '#eeeeee',
backgroundColor: '#ffffff',
marginBottom: -1,
},
typeaheadRowText: {
fontSize: 15,
fontFamily: 'open-sans',
lineHeight: 20,
backgroundColor: '#ffffff',
},
}
export const Typeahead = props => {
return (
<View style={[props.container, props.style]}>
<GradientInput style={styles.input}
placeholder={props.placeholder}
value={props.value}
onChange={props.onChange} />
<TypeaheadList vals={props.vals}
valKey={props.valKey}
onTypeaheadClick={props.onTypeaheadClick} />
</View>
)
}
export const TypeaheadList = props => {
if (!props.vals) return null;
return (
<View style={styles.typeaheadContainer}>
{props.vals.map(i => {
let text = i.text;
if (text.length > 31) text = text.substring(0,31) + '...';
return (
<TouchableOpacity activeOpacity={0.5} key={i[props.valKey]}
style={styles.typeaheadRow}
onPress={() => props.onTypeaheadClick(i[props.valKey])}>
<Text numberOfLines={1} style={styles.typeaheadRowText}>{text}</Text>
</TouchableOpacity>
)
})}
</View>
)
}
export default Typeahead
Try to move Typeahead component below all CardRow components and set position:absolute for Typeahead. Probably on android - the latest view shadow all views before (I am not sure, but I think you have to try it for next discovering issue).
You should also remove position: absolute from all but one component. Working code:
Explore.js
import React from 'react'
import { connect } from 'react-redux'
import { Text, View, ScrollView, TouchableOpacity } from 'react-native'
import { gradients, sizing } from '../../style'
import { LinearGradient } from 'expo-linear-gradient'
import { MountainHero } from '../Heros'
import { CardRow } from '../Card'
import Loading from '../Loading'
import { setExploreSearch, onExploreTypeaheadClick } from '../../actions/locations'
import { Typeahead } from '../Typeahead'
const styles = {
container: {
flex: 1,
flexDirection: 'column',
},
scrollView: {
paddingBottom: sizing.margin,
},
loadingContainer: {
position: 'absolute',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
zIndex: 1,
elevation: 1,
top: 53,
width: '100%',
},
topCardRow: {
paddingTop: sizing.margin + sizing.gradientInput.height,
},
typeahead: {
margin: sizing.margin,
marginBottom: 0,
width: sizing.screen.width - (2*sizing.margin),
zIndex: 1,
elevation: 1,
position: 'absolute',
top: sizing.mountainHero.height,
left: 0,
}
}
const Explore = props => {
const { authenticated: a, spotlight, loading } = props;
let r = (a.recommendedLocations || []);
if (!r || !spotlight) return null;
// remove spotlight locations from the recommended locations
const ids = spotlight.map(i => i.guid);
const recommended = r.filter(i => ids.indexOf(i.guid) == -1);
return (
<LinearGradient style={styles.container} colors={gradients.teal}>
<ScrollView contentContainerStyle={styles.scrollView}>
{loading && (
<View style={styles.loadingContainer}>
<Loading />
</View>
)}
<MountainHero text='Explore' />
<CardRow
style={styles.topCardRow}
text='Explore Places'
cards={recommended}
type='location' />
<CardRow
text='In the Spotlight'
cards={spotlight}
type='location' />
<Typeahead
style={styles.typeahead}
placeholder='Search Cities'
value={props.exploreSearch}
onChange={props.setExploreSearch}
vals={props.exploreTypeahead}
valKey={'place_id'}
onTypeaheadClick={props.onExploreTypeaheadClick}
/>
</ScrollView>
</LinearGradient>
)
}
const mapStateToProps = state => ({
authenticated: state.users.authenticated,
spotlight: state.locations.spotlight,
exploreSearch: state.locations.exploreSearch,
exploreTypeahead: state.locations.exploreTypeahead,
loading: state.locations.loading,
})
const mapDispatchToProps = dispatch => ({
setExploreSearch: s => dispatch(setExploreSearch(s)),
onExploreTypeaheadClick: val => dispatch(onExploreTypeaheadClick(val)),
})
export default connect(mapStateToProps, mapDispatchToProps)(Explore)
Typeahead.js
import React from 'react'
import { Text, View, TouchableOpacity } from 'react-native'
import { sizing, GradientInput } from '../style'
const styles = {
container: {
zIndex: 1,
elevation: 1,
height: 400,
width: '100%',
},
input: {
width: '100%',
borderRadius: 0,
},
typeaheadContainer: {
zIndex: 1,
elevation: 1,
top: 0,
width: '100%',
},
typeaheadRow: {
padding: 10,
paddingTop: 12,
paddingBottom: 12,
borderWidth: 1,
borderColor: '#eeeeee',
backgroundColor: '#ffffff',
marginBottom: -1,
zIndex: 1,
elevation: 1,
},
typeaheadRowText: {
fontSize: 15,
fontFamily: 'open-sans',
lineHeight: 20,
backgroundColor: '#ffffff',
},
}
export const Typeahead = props => {
return (
<View style={[props.container, props.style]}>
<GradientInput style={styles.input}
placeholder={props.placeholder}
value={props.value}
onChange={props.onChange} />
<TypeaheadList vals={props.vals}
valKey={props.valKey}
onTypeaheadClick={props.onTypeaheadClick} />
</View>
)
}
export const TypeaheadList = props => {
if (!props.vals) return null;
return (
<View style={styles.typeaheadContainer}>
{props.vals.map(i => {
let text = i.text;
if (text.length > 31) text = text.substring(0,31) + '...';
return (
<TouchableOpacity activeOpacity={0.5} key={i[props.valKey]}
style={styles.typeaheadRow}
onPress={() => props.onTypeaheadClick(i[props.valKey])}>
<Text numberOfLines={1} style={styles.typeaheadRowText}>{text}</Text>
</TouchableOpacity>
)
})}
</View>
)
}
export default Typeahead

Pass data between two components in React Native

I have a component that encapsulates three components one of them is the DrawerLayoutAndroid. Now I want to pass the reference of the drawer from the drawer component to the main component and then pass it to the header component so I can trigger it from the header component.
I have no idea how to do that.
Here is the main component 'cases.js'
import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import Header from '#components/header';
import BottomBar from '#components/bottom-bar';
import SideBar from '#components/drawer';
export default class Cases extends Component {
state = {
title : 'Cases'
}
change_text = () => {
this.setState({ title : 'Test' })
}
open_drawer = (ref) => {
ref.openDrawer();
}
close_drawer = (ref) => {
ref.closeDrawer();
}
render() {
return (
<SideBar style={ styles.container }>
<Header title={ this.state.title } change_text={ this.change_text } open={ this.state.side_bar } />
<View style={ styles.body }>
<Text style={ styles.text }> { this.state.name } </Text>
<TouchableOpacity onPress={ () => this.change_text() } style={ styles.button }>
<Text> Change State </Text>
</TouchableOpacity>
</View>
<BottomBar ref={ this.state.side_bar } />
</SideBar>
)
}
}
const styles = StyleSheet.create({
container : {
flex : 1,
flexDirection: 'column',
},
body : {
flex : 1,
backgroundColor: '#ccc',
justifyContent: 'center',
alignItems: 'center'
},
text : {
color : '#fff'
},
button : {
backgroundColor : '#eee',
paddingVertical: 5,
paddingHorizontal: 10
}
})
Here is my header:
import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native';
import DrawerLayoutAndroid from 'DrawerLayoutAndroid';
import LinearGradient from 'react-native-linear-gradient';
export default class Header extends Component {
change_text = () => {
this.props.change_text();
}
open = ()
render () {
return (
<LinearGradient start={{x: 0, y: 0}} end={{x: 1, y: 0}} colors={['#a4d294', '#3ac6f3']} style={ styles.header }>
<TouchableOpacity onPress={ () => this.props.change_text() }>
<Image source={ require('#media/images/add.png') } style={ styles.add_button } />
</TouchableOpacity>
<Text style={ styles.title }> { this.props.title } </Text>
<TouchableOpacity onPress={ () => this.props.open() }>
<Image source={ require('#media/images/more.png') } style={ styles.more_button } />
</TouchableOpacity>
</LinearGradient>
)
}
}
const styles = StyleSheet.create({
header : {
height: 70,
backgroundColor: '#eee',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center'
},
title : {
color : '#fff',
textAlign: 'center',
fontSize: 20,
letterSpacing: 3
},
add_button : {
width: 30,
height: 30,
marginHorizontal: 10
},
more_button : {
width: 30,
height: 30,
marginHorizontal: 10
}
})
And here is my drawer.js
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import DrawerLayoutAndroid from 'DrawerLayoutAndroid';
import LinearGradient from 'react-native-linear-gradient';
export default class Drawer extends Component {
render () {
const NavigationMenu = (
<LinearGradient start={{x: 0, y: 0}} end={{x: 0, y: 1}} colors={['#a4d294', '#3ac6f3']} style={{ flex: 1 }}>
<View style={{ flex : 6, justifyContent: 'center' }}>
<Text>He There</Text>
</View>
</LinearGradient>
)
return (
<DrawerLayoutAndroid
drawerWidth={250}
drawerPosition={ DrawerLayoutAndroid.positions.Right }
renderNavigationView={ () => NavigationMenu }
ref={ (drawer) => this.props.ref = drawer }
>
{ this.props.children }
</DrawerLayoutAndroid>
)
}
}
I am going to answer your question by giving a simple example.
Lets take 2 components parent and child. You want to pass some message from parent to child and get a callback from child to parent when an event occurs in child.
export default class Parent extends React.Component<any, any> {
callback (paramFromChild) => {
// implement what to do when certain event occurs in child component
}
render () {
<View>
<Child message={"some text"} callbackFromChild={this.callback}/>
</View>
}
}
Child component
Interface childProps {
message: string
callbackFromChild(paramFromChild);
}
export default class Child extends React.Component<childProps, any> {
render () {
<View>
<Button title={this.props.message} onPress={this.props.callbackFromChild("some message from child")}/>
</View>
}
}
In this way you can communicate between different components using props.

Categories