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.
Related
I'm learning react native and I've been trying to solve this issue for last 3 days.
I'm using EXPO, The buttons does not change the value in const [isStarted, setIsStarted] = useState(false)
The buttons titles are: "pause" and "start"
Here is my code:
import React, { useState,useEffect } from 'react';
import { View, StyleSheet, Text, Button,Alert } from 'react-native';
import { colors } from '../../utils/colors';
import { spacing } from '../../utils/sizes';
import { Countdown } from '../../components/Countdown';
import { RoundedButton } from '../../components/RoundedButton';
import {ProgressBar} from 'react-native-paper';
export const Timer = ({ focusSubject }) => {
const [isStarted, setIsStarted] = useState(false);
return (
<View style={styles.container}>
<View style={styles.countdown}>
<Countdown isPaused={!isStarted}/>
</View>
<View styles={{ paddingTop: spacing.xxl }}>
<Text style={styles.title}> Focusing on: </Text>
<Text style={styles.task}> {focusSubject} </Text>
</View>
<View style= {styles.buttonWrapper}>
{isStarted ? (
**<RoundedButton title="pause" onPress={() => setIsStarted(false)} />**
) : (
**<RoundedButton title="start" onPress={() => setIsStarted(true)} />**
)}
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
title: {
color: colors.white,
textAlign: 'center',
},
task: {
color: colors.white,
textAlign: 'center',
fontWeight: 'bold',
},
countdown: {
flex: 0.5,
alignItems: 'center',
justifyContent: 'center',
},
buttonWrapper: {
alignItems: 'center',
flex: 0.3,
padding: 15,
justifyContent: 'center',
},
});
You need to pass a prop name to RoundedButton component and inside of that you need to call onPress
for ex:
import React, { useState,useEffect } from 'react';
import { View, StyleSheet, Text, Button,Alert } from 'react-native';
import { colors } from '../../utils/colors';
import { spacing } from '../../utils/sizes';
import { Countdown } from '../../components/Countdown';
import { RoundedButton } from '../../components/RoundedButton';
import {ProgressBar} from 'react-native-paper';
export const Timer = ({ focusSubject }) => {
const [isStarted, setIsStarted] = useState(false);
const onButtonPress = () => {
setIsStarted(!isStarted)
}
return (
<View style={styles.container}>
<View style={styles.countdown}>
<Countdown isPaused={!isStarted}/>
</View>
<View styles={{ paddingTop: spacing.xxl }}>
<Text style={styles.title}> Focusing on: </Text>
<Text style={styles.task}> {focusSubject} </Text>
</View>
<View style= {styles.buttonWrapper}>
<RoundedButton title={isStarted ? "pause" : "start"} onButtonHandler={onButtonPress} />
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
title: {
color: colors.white,
textAlign: 'center',
},
task: {
color: colors.white,
textAlign: 'center',
fontWeight: 'bold',
},
countdown: {
flex: 0.5,
alignItems: 'center',
justifyContent: 'center',
},
buttonWrapper: {
alignItems: 'center',
flex: 0.3,
padding: 15,
justifyContent: 'center',
},
});
Here I added a button handler as a prop into RoundedButton, now inside RoundedButton call onPress={onButtonHandler} in the touchable event.
If you are still facing trouble please share update RoundedButton component code
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'
I was trying to make a "photo galley app" where each image is a "button" that toggle on the boolean property for Modal tag. The problem is that the images are rendered by a FlatList which pass props to component "GenerateImage.js", but at the same time, I need to pass the state and dispatch function as a parameter as well.
File who render the FlatList:
import React, { Component } from 'react'
import { FlatList, View, StyleSheet, TouchableOpacity, Text, AppRegistry } from 'react-native'
import { connect } from 'react-redux'
import GenerateImage from '../components/GenerateImage'
import commonStyles from '../commonStyles'
import Modal from '../components/Modal'
const Photos = ({ params }) => {
return (
<View style={{ flex: 1 }}>
<Modal isVisible={params.showFullImage} />
<View style={styles.buttonsContainer}>
<TouchableOpacity style={styles.touchContainer}>
<Text style={styles.button}>Hoje</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.touchContainer}>
<Text style={styles.button}>Mês</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.touchContainer}>
<Text style={styles.button}>Ano</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.touchContainer}>
<Text style={styles.button}>Álbuns</Text>
</TouchableOpacity>
</View>
<View style={{ flex: 30 }}>
<FlatList data={params.images} keyExtractor={item => `${item.id}`}
renderItem={({item}) => <GenerateImage {...item} />} numColumns={2} />
</View>
</View>
)
}
const styles = StyleSheet.create({
buttonsContainer: {
flex: 3,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#1c2431',
},
touchContainer: {
marginHorizontal: 20,
backgroundColor: '#439ce8',
borderRadius: 30,
width: 65,
alignItems: 'center',
justifyContent: 'center',
padding: 5
},
button: {
color: 'white',
fontFamily: commonStyles.Font,
fontSize: 14
}
})
export default connect(state => ({ params: state[0] }))(Photos)
GenerateImage.js:
import React from 'react'
import { View,
StyleSheet,
Image,
PixelRatio,
Dimensions,
TouchableOpacity } from 'react-native'
import { connect } from 'react-redux'
const GenerateImage = (props, {param, dispatch}) => {
function toggleModal(param) {
return {
type: 'TOGGLE_MODAL_ON',
}
}
return (
<View style={styles.container}>
<View style={styles.imgContainer}>
<TouchableOpacity activeOpacity={0.7} onPress={() => dispatch(toggleModal(param))}>
<Image source={props.image} style={styles.imgContainer} />
</TouchableOpacity>
</View>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginVertical: 5,
marginHorizontal: 4
},
imgContainer: {
height: Dimensions.get('window').height * 0.25,
width: Dimensions.get('window').width * 0.48,
//borderRadius: 8,
//flex: 1,
//orderWidth: 1,
},
image: {
resizeMode: 'contain',
aspectRatio: PixelRatio.get()
},
})
export default connect(state => ({ param: state[0].showFullImage }))(GenerateImage)
So, how can I pass both data?
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
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>
);
}
}