I am using react-native-simple-picker in my app which works fine in my project if I use the default show button but I would like to show the picker when I use a different button in my project. It looks like this.refs.picker.show() in ProposalPicker.js is the function that needs to be called, but I am not sure how to access this from another component file. Currently my code results in the following error - `Cannot read property 'show' of undefined. Appreciate any help.
ProposalPicker.js
import React, { Component } from 'react';
import { Picker, View, Text } from 'react-native';
import Button from './Button';
import SimplePicker from 'react-native-simple-picker';
const options = ['Option1', 'Option2', 'Option3'];
// Labels is optional
const labels = ['Banana', 'Apple', 'Pear'];
class ProposalPicker extends Component {
constructor(props) {
super(props);
this.state = {
selectedOption: '',
};
}
render() {
return (
<View style={styles.container}>
<Text style={styles.paragraph}>Current Option: {this.state.selectedOption}</Text>
<Text
style={{ color: '#006381', marginTop: 20 }}
onPress={() => {
this.refs.picker.show();
}}
>
Click here to select your option
</Text>
<Text
style={{ color: '#006381', marginTop: 20 }}
onPress={() => {
this.refs.picker2.show();
}}
>
Click here to select your option with labels
</Text>
<SimplePicker
ref={'picker'}
options={options}
onSubmit={(option) => {
this.setState({
selectedOption: option,
});
}}
/>
<SimplePicker
ref={'picker2'}
options={options}
labels={labels}
itemStyle={{
fontSize: 25,
color: 'red',
textAlign: 'left',
fontWeight: 'bold',
}}
onSubmit={(option) => {
this.setState({
selectedOption: option,
});
}}
/>
</View>
);
}
}
// class ProposalPicker extends Component {
// state={proposal: ''}
// selectedValue = '';
// updateProposal = (proposal) => {
// this.setState({ proposal: this.selectedValue });
// }
// handleConfirmClick = () => {
// this.setState({ proposal: this.selectedValue });
// }
// render() {
// return (
// <View>
// <Picker selectedValue = {this.selectedValue}
// onValueChange = {this.updateProposal}
// itemStyle={{ backgroundColor: 'grey' }}
// >
// <Picker.Item label = "Test" value = "TestValue1" />
// <Picker.Item label = "Test 1" value = "TestValue2" />
// <Picker.Item label = "Test" value = "TestValue3" />
// <Picker.Item label = "Test" value = "TestValue4" />
// <Picker.Item label = "Test" value = "TestValue5" />
// <Picker.Item label = "Test" value = "TestValue6" />
// <Picker.Item label = "Test" value = "TestValue7" />
// <Picker.Item label = "Test" value = "TestValue8" />
// <Picker.Item label = "Test nothing" value = "TestValue9" />
// </Picker>
// <Text style = {styles.textStyle}>CONFIRM</Text>
// </View>
// )
// }
// }
const styles = {
proposalPickerStyle: {
backgroundColor: 'lightgrey'
},
textStyle: {
flex: 1
}
}
export default ProposalPicker;
ProposalPickerButton.js
import React from 'react';
import { View, Text, Image, TouchableOpacity } from 'react-native';
const PickerButton = ({ onPress, text }) => {
const { textStyle, iconStyle, iconContainerStyle, textContainerStyle, buttonStyle } = styles;
return (
<TouchableOpacity onPress={onPress} style={buttonStyle}>
<View style={styles.containerStyle}>
<View style={iconContainerStyle}>
<Image
style={iconStyle}
source={require('./images/201.png')}
/>
</View>
<View style={textContainerStyle}>
<Text style={textStyle}>{text}</Text>
</View>
<View style={iconContainerStyle}>
<Image
style={iconStyle}
source={require('./images/201.png')}
/>
</View>
</View>
</TouchableOpacity>
);
}
const styles = {
containerStyle: {
flex: 1,
//backgroundColor: 'red',
borderWidth: 2,
borderRadius: 0,
borderColor: '#FFFFFF',
//shadowColor: '#000',
//shadowOffset: { width: 0, height: 2 },
//shadowOpacity: 0.1,
//shadowRadius: 2,
//elevation: 1,
marginLeft: 40,
marginRight: 40,
marginTop: 10,
marginBottom: 10,
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row'
},
iconContainerStyle: {
flex: 2,
//backgroundColor: 'blue',
justifyContent: 'center',
//alignItems: 'center',
//width: '20%',
//height: '20%'
},
iconStyle: {
flex: 1,
width: null,
height: null,
resizeMode: 'contain',
marginLeft: 10,
marginRight: 10,
marginTop: 10,
marginBottom: 10
},
textContainerStyle: {
flex: 8,
//backgroundColor: 'orange',
alignItems: 'flex-start',
justifyContent: 'center',
},
textStyle: {
fontSize: 20,
fontWeight: 'bold',
color: '#FFFFFF',
//marginLeft: 10
//padding: 18
},
buttonStyle: {
width: '100%',
height: '100%'
}
};
export default PickerButton;
App.js
import React, { Component } from 'react';
import { View, Text, ImageBackground } from 'react-native';
import Logo from './Logo';
import ProposalPickerButton from './ProposalPickerButton';
import Button from './Button';
import ProposalPicker from './ProposalPicker';
import SimplePicker from 'react-native-simple-picker';
class App extends Component {
render() {
return (
<ImageBackground
source={require('./images/city.png')}
style={styles.backgroundStyle}
>
<View style={styles.backgroundOverlayStyle} />
<View style={styles.container}>
<View style={styles.logoContainer}>
<Logo />
</View>
<View style={styles.proposalPickerButtonStyle}>
<ProposalPickerButton
onPress={() => new ProposalPicker().refs.picker.show()}
// onPress={() => console.log('Proposal picker button pressed')}
//onPress={() => Linking.openURL(url)}
text="Select a service line"
/>
</View>
<View style={styles.startProposalButtonStyle}>
<Button text="Start proposal"/>
</View>
<View style={styles.proposalPickerStyle}>
{/* <ProposalPicker /> */}
</View>
</View>
</ImageBackground>
);
}
}
const styles = {
backgroundStyle: {
flex: 1,
backgroundColor: '#000000',
width: '100%',
height: '100%',
position: 'absolute'
},
backgroundOverlayStyle: {
flex: 1,
position: 'absolute',
backgroundColor: '#003284',
opacity: 0.5,
width: '100%',
height: '100%'
},
container: {
//backgroundColor: 'red',
flex: 1,
//opacity: 0.5,
alignItems: 'center',
width: '100%',
height: '65%',
},
logoContainer: {
//backgroundColor: 'blue',
flex: 3,
alignItems: 'center',
justifyContent: 'center',
width: '100%',
height: '65%',
},
proposalPickerButtonStyle: {
flex: 1,
//backgroundColor: 'yellow',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
height: '100%',
marginLeft: 100,
marginRight: 100
},
startProposalButtonStyle: {
flex: 1,
//backgroundColor: 'purple',
width: '100%',
height: '100%',
marginTop: 10,
marginRight: 80
},
proposalPickerStyle: {
opacity: 1,
flex: 2,
backgroundColor: 'green',
width: '100%',
height: '100%'
},
};
export default App;
To call methods via refs you need to have a ref assigned to an already mounted component. Therefore you can't say new ProposalPicker().refs.picker.show() because refs.picker does not exist until the component is mounted. You Should have your button and picker components in the same parent, that way you can easily create a ref in that parent, assign it, and call methods from it:
Also you should use callback refs instead of string refs because string refs are deprecated. In that case it would look like:
constructor(props){
super(props)
this.state = ...
this.picker = React.createRef() // make the ref
}
Then assign the ref:
<SimplePicker
ref={this.picker}
And then you can make an function to call when your button is pressed:
showPicker = () => {
if (this.picker.current) {
this.picker.current.show()
}
}
Related
I am using FlatList in my component which is working fine. All is wanted is that my entire screen should have an automatic height to it and FlatList contents never does out of the screen height.
Also, the height of FlatList should be changed based on content/items in it rather than giving any fixed height.
How I can be acheived both cases like automatic screen height and auto height of FlatList content?
Code:
import React, { useState, useEffect } from 'react';
import {
View,
StyleSheet,
useWindowDimensions,
Text,
FlatList,
SafeAreaView,
TouchableOpacity,
} from 'react-native';
import { LinearGradient as LinearGradientView } from 'expo-linear-gradient';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { ActivityIndicator, ThemeProvider } from 'react-native-paper';
import { ScrollView } from 'react-native-gesture-handler';
import { useIsFocused, useNavigation } from '#react-navigation/native';
import Svg, { Path } from 'react-native-svg';
import { BASE_GRADIENT_HEAVY } from '../rooms/Background';
import { useResolution } from '../browse/useResolution';
import { OnboardingNavigationProp } from '../navigation/LinkingConfiguration';
import { LIGHT_THEME } from '../Theme';
import { OnboardingBack } from './OnboardingBack';
import {
useOnboardingYearsOfExperiencePage,
useOnboardingYearsOfExperienceSubmit,
} from './useOnboardingYearsOfExperiencePage';
export function OnboardingYearsOfExperience({ route }: { route?: any }) {
const { height } = useWindowDimensions();
const { top: safeAreaTop } = useSafeAreaInsets();
const [selectedId, setSelectedId] = useState<{ id: string }>();
const [role_id, setRoleId] = useState<number>();
const { navigate } =
useNavigation<OnboardingNavigationProp<'OnboardingConfirmAllDetails'>>();
const parentUrl = route?.params.result.onboarding._links;
const initialUrl = parentUrl.onboarding_years_of_experience.href;
const onboardingUrl = parentUrl.self.href;
useEffect(() => {
setRoleId(route?.params.role_id);
}, []);
const isFocused = useIsFocused();
const { contentType } = useResolution();
const {
data: result,
isLoading,
error,
} = useOnboardingYearsOfExperiencePage(initialUrl, contentType, role_id, {
enabled: isFocused,
notifyOnChangeProps: ['data', 'isLoading', 'error'],
});
const {
mutateAsync: updateYearsOfExperience,
isLoading: isUpdatingYearsOfExperience,
error: yearsOfExperienceUpdateError,
} = useOnboardingYearsOfExperienceSubmit(onboardingUrl);
const Arrow = ({ style }: { style: object }) => {
return (
<Svg width="7" height="11" viewBox="0 0 7 11" fill="none" style={style}>
<Path
d="M6.28711 5.53931C6.28711 5.31649 6.19783 5.12476 6.02452 4.95376L1.9911 1.07251C1.85455 0.937781 1.68649 0.865234 1.48692 0.865234C1.07728 0.865234 0.751664 1.18651 0.751664 1.58552C0.751664 1.78243 0.830441 1.96898 0.977493 2.11407L4.54875 5.53413L0.977492 8.95937C0.835692 9.10446 0.751663 9.28583 0.751662 9.48792C0.751662 9.88693 1.07728 10.2082 1.48692 10.2082C1.68649 10.2082 1.85455 10.1357 1.99635 10.0009L6.02452 6.11968C6.20308 5.93832 6.28711 5.75695 6.28711 5.53931Z"
fill="#4D4D4D"
/>
</Svg>
);
};
const Item = ({
item,
onPress,
}: {
item?: { id: string; title: string };
onPress: () => void;
}) => (
<TouchableOpacity onPress={onPress}>
<Text
style={{
color: '#4D4D4D',
fontFamily: 'Inter_400Regular',
fontStyle: 'normal',
fontWeight: '400',
fontSize: 16,
lineHeight: 32,
padding: 3,
margin: 2,
}}
>
{item?.title}
</Text>
</TouchableOpacity>
);
const renderItem = ({ item }: { item: { id: string; title: string } }) => {
return (
<React.Fragment>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
borderRadius: 5,
backgroundColor:
selectedId?.id === item?.id ? '#F2F2F2' : 'transparent',
}}
>
<View style={{ width: '90%' }}>
<Item
item={item}
onPress={() => {
setSelectedId({ id: item.id });
updateYearsOfExperience({ id: item.id, role_id })
.then((result) => {
navigate('Onboarding', {
screen: 'OnboardingConfirmAllDetails',
params: { result },
});
})
.catch(() => {});
}}
/>
</View>
<View style={{ width: '10%' }}>
<Arrow style={{ position: 'absolute', top: 16, right: 10 }} />
</View>
</View>
</React.Fragment>
);
};
return (
<ThemeProvider theme={LIGHT_THEME}>
<View style={{ height: safeAreaTop }} />
<View style={styles.topHeader}>
<LinearGradientView
{...BASE_GRADIENT_HEAVY}
style={[styles.gradiantStyle]}
/>
</View>
<View style={styles.innerContainer}>
<ScrollView
contentContainerStyle={{
marginHorizontal: 'auto',
alignSelf: 'center',
width: '100%',
backgroundColor: '#ffffff',
height: '100%',
}}
>
<OnboardingBack
style={{
left: -10,
}}
/>
<Text style={styles.topHeadline}>
How many years of experience do you have?
</Text>
<Text style={styles.middleHeadline}>
Jump-start the conversation by sharing your years of experience
within healthcare.
</Text>
{isLoading || isUpdatingYearsOfExperience ? (
<ActivityIndicator size="large" />
) : (
<SafeAreaView>
<FlatList
contentContainerStyle={{ flexGrow: 1 }}
data={Object.values(
result!['years_of_experiences']['years_of_experiences_list']
)}
renderItem={renderItem}
keyExtractor={(item) => item.id}
extraData={selectedId}
style={{
borderWidth: 1,
borderStyle: 'solid',
borderColor: '#D7D7D7',
borderRadius: 5,
padding: 12,
height: '27%',
}}
ListEmptyComponent={
<View>
<Text>No data found</Text>
</View>
}
/>
</SafeAreaView>
)}
</ScrollView>
</View>
</ThemeProvider>
);
}
const styles = StyleSheet.create({
innerContainer: {
display: 'flex',
position: 'relative',
backgroundColor: 'white',
padding: 18,
},
topHeader: {
backgroundColor: '#e5dede',
padding: 0,
width: '100%',
},
topHeadline: {
fontSize: 24,
fontFamily: 'CircularStd_Medium',
fontStyle: 'normal',
fontWeight: '500',
color: '#222222',
marginTop: 40.6,
marginBottom: 14.6,
display: 'flex',
alignItems: 'center',
lineHeight: 32,
},
middleHeadline: {
fontSize: 16,
fontFamily: 'Inter_400Regular',
fontStyle: 'normal',
fontWeight: '400',
lineHeight: 24,
color: '#4D4D4D',
marginBottom: 30,
},
gradiantStyle: {
width: 248.4,
height: 4.71,
},
});
add the following style to your flatList =>
style={{maxHeight:'what ever you want',flexGrow:0}}
I'm trying to make a toy stopwatch app in order to learn react-native.
I made a lap system, but it is getting way too slow when there are >15 laps. I think the poor performance point is the laps: this.state.laps.concat([d - this.state.lapTimerStart]) part, because of .concat is making a new object every time the Lap button is pressed.
I've heard that .push is way faster than .concat.
So I tried to use .push, but because .push was mutating the array, and FlatList was a PureComponent so it re-rendered only when the props have changed.
I found a way, but it was just the same as doing .concat because basically, it was
let lapArr = this.state.laps;
Array.prototype.push.apply(lapArr, [d - this.state.lapTimerStart]);
this.setState({
laps: lapArr,
})
The full code is
import React, {Component} from 'react';
import {
View,
Text,
StyleSheet,
TouchableHighlight,
FlatList,
} from 'react-native';
import {useTheme} from 'react-native-paper';
import TimeFormatter from 'minutes-seconds-milliseconds';
class Stopwatch extends Component {
constructor(props) {
super(props);
this.state = {
laps: [],
isRunning: false,
mainTimer: null,
lapTimer: null,
mainTimerStart: null,
lapTimerStart: null,
};
}
handleLapReset() {
let {isRunning, mainTimerStart, lapTimer} = this.state;
if (mainTimerStart) {
if (isRunning) {
const d = new Date();
this.setState({
lapTimerStart: d,
lapTimer: d - this.state.lapTimerStart + lapTimer,
laps: this.state.laps.concat([d - this.state.lapTimerStart]),
});
return;
}
this.state.laps = [];
this.setState({
mainTimerStart: null,
lapTimerStart: null,
mainTimer: 0,
lapTimer: 0,
});
}
}
handleStartStop() {
let {isRunning, mainTimer, lapTimer} = this.state;
if (isRunning) {
clearInterval(this.interval);
this.setState({
isRunning: false,
});
return;
}
const d = new Date();
this.setState({
mainTimerStart: d,
lapTimerStart: d,
isRunning: true,
});
this.interval = setInterval(() => {
const t = new Date();
this.setState({
mainTimer: t - this.state.mainTimerStart + mainTimer,
lapTimer: t - this.state.lapTimerStart + lapTimer,
});
}, 10);
}
_renderTimers() {
const {theme} = this.props;
return (
<View
style={[
styles.timerWrapper,
{backgroundColor: theme.colors.background},
]}>
<View style={styles.timerWrapperInner}>
<Text style={[styles.lapTimer, {color: theme.colors.text}]}>
{TimeFormatter(this.state.lapTimer)}
</Text>
<Text style={[styles.mainTimer, {color: theme.colors.text}]}>
{TimeFormatter(this.state.mainTimer)}
</Text>
</View>
</View>
);
}
_renderButtons() {
const {theme} = this.props;
return (
<View style={styles.buttonWrapper}>
<TouchableHighlight
underlayColor={theme.colors.disabled}
onPress={this.handleLapReset.bind(this)}
style={[styles.button, {backgroundColor: theme.colors.background}]}>
<Text style={[styles.lapResetBtn, {color: theme.colors.text}]}>
{this.state.mainTimerStart && !this.state.isRunning
? 'Reset'
: 'Lap'}
</Text>
</TouchableHighlight>
<TouchableHighlight
underlayColor={theme.colors.disabled}
onPress={this.handleStartStop.bind(this)}
style={[styles.button, {backgroundColor: theme.colors.background}]}>
<Text
style={[styles.startBtn, this.state.isRunning && styles.stopBtn]}>
{this.state.isRunning ? 'Stop' : 'Start'}
</Text>
</TouchableHighlight>
</View>
);
}
_renderLaps() {
return (
<View style={styles.lapsWrapper}>
<FlatList
data={this.state.laps}
renderItem={this.renderItem}
keyExtractor={this.keyExtractor}
/>
</View>
);
}
keyExtractor(item, index) {
return index.toString();
}
renderItem({item, index}) {
return (
<View style={styles.lapRow}>
<View style={styles.lapStyle}>
<View style={styles.lapBoxStyle} />
<Text style={styles.lapNumber}>{index + 1}</Text>
</View>
<View style={styles.lapStyle}>
<Text style={styles.lapTime}>{TimeFormatter(item)}</Text>
</View>
</View>
);
}
render() {
return (
<View style={styles.container}>
<View style={styles.top}>{this._renderTimers()}</View>
<View style={styles.middle}>{this._renderButtons()}</View>
<View style={styles.bottom}>{this._renderLaps()}</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {flex: 1},
timerWrapper: {
justifyContent: 'center',
flex: 1,
},
top: {
flex: 1,
},
middle: {
flex: 1,
backgroundColor: '#F0EFF5',
},
bottom: {
flex: 2,
},
mainTimer: {
fontSize: 50,
fontFamily: 'CircularStd-Medium',
alignSelf: 'center',
},
lapTimer: {
fontSize: 18,
fontFamily: 'CircularStd-Medium',
alignSelf: 'flex-end',
},
timerWrapperInner: {
alignSelf: 'center',
},
buttonWrapper: {
flexDirection: 'row',
justifyContent: 'space-around',
paddingTop: 15,
paddingBottom: 30,
},
button: {
height: 80,
width: 80,
borderRadius: 40,
backgroundColor: '#FFF',
justifyContent: 'center',
alignItems: 'center',
},
lapRow: {
flexDirection: 'row',
justifyContent: 'space-between',
height: 40,
paddingTop: 10,
},
lapNumber: {
flexDirection: 'row',
fontSize: 16,
fontFamily: 'CircularStd-Book',
color: '#777',
flex: 1,
},
lapTime: {
flexDirection: 'row',
color: '#000',
fontSize: 20,
fontFamily: 'CircularStd-Book',
flex: 1,
},
startBtn: {
color: '#0C0',
fontFamily: 'CircularStd-Book',
},
stopBtn: {
color: '#C00',
fontFamily: 'CircularStd-Book',
},
lapsWrapper: {
backgroundColor: '#ddd',
},
lapResetBtn: {
fontFamily: 'CircularStd-Book',
},
lapStyle: {
width: '40%',
flexDirection: 'row',
},
lapBoxStyle: {
flexDirection: 'row',
flex: 1,
},
});
export default function StopwatchScreen(props) {
const theme = useTheme();
return <Stopwatch {...props} theme={theme} />;
}
I tried not to use arrow functions, many news, but it didn't help that much.
FlatList is a pure component and it is mandatory to give new ref of data prop to render list . You should use concat but it created new object.
i think the main issue is renderItem.
create a separate PureComponent to avoid re-rendeing of items
class Item extends PureComponent {
const {item,index} = this.props;
return (
<View style={styles.lapRow}>
<View style={styles.lapStyle}>
<View style={styles.lapBoxStyle} />
<Text style={styles.lapNumber}>{index + 1}</Text>
</View>
<View style={styles.lapStyle}>
<Text style={styles.lapTime}>{TimeFormatter(item)}</Text>
</View>
</View>
);
}
and use in render item
renderItem({item, index}) {
return (
<Item item={item} index={index} />
);
}
I am trying to build a react native application with the expo, First I try to build this application with my chrome web browser, it was worked without any issue after that I try to test the application with my android device and I'm getting an exception - "Text strings must be rendered within a <Text> component" HomeScreen.js files. I have no idea why this happened. My code as follows,
/*This is an Example of Grid View in React Native*/
// import * as React from "react";
import React from 'react';
import { Image, FlatList, StyleSheet, View, Text, TouchableOpacity, TextInput } from 'react-native';
import { COLORS } from '../../asserts/Colors/Colors';
import { CATEGORIES } from '../../asserts/mocks/itemListData';
import CategoryGridTitle from '../components/HomeGridTile';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import { HeaderButton } from '../components/HeaderButton';
import HomeScreenButton from '../components/HomeScreenButton';
//import all the components we will need
const renderTopBarItems = (topBarItems) => {
return (
<TouchableOpacity
style={styles.topBar}>
<Text style={styles.textStyle}> {topBarItems.item.category} </Text>
</TouchableOpacity>
)
}
const HomeScreen = props => {
const renderGridItem = (itemData) => {
return <CategoryGridTitle
title={itemData.item.title}
image={itemData.item.image}
onSelect={() => {
props.navigation.navigate({
routeName: 'PaymentHandlerScreen',
params: {
categoryId: itemData.item.id
}
});
}} />;
}
// const [images, setImages] = React.useState(picsumImages);
return (
<View style={styles.mainBody}>
<View style={styles.searchContainer}>
<TextInput
placeholder='Search'
style={styles.formField}
placeholderTextColor={'#888888'}
/>
<TouchableOpacity onPress={() => props.navigation.navigate('BarCodeScannerScreen')}
style={styles.saveFormField}>
<Image
source={require('../../../images/barcode.png')}
style={{
width: '100%',
height: '30%',
resizeMode: 'contain',
alignContent: 'center',
}}
/> </TouchableOpacity>
</View>
<View style={styles.tabBar}>
<FlatList
horizontal
pagingEnabled={true}
showsHorizontalScrollIndicator={false}
keyExtractor={(item, index) => item.id}
data={CATEGORIES}
renderItem={renderTopBarItems} />
</View>
<FlatList
keyExtractor={(item, index) => item.id}
data={CATEGORIES}
renderItem={renderGridItem}
numColumns={3} />
<HomeScreenButton style={styles.buttonView} />
</View>
);
};
HomeScreen.navigationOptions = navigationData => {
return {
headerTitle: 'Tickets',
headerRight: (
<HeaderButtons HeaderButtonComponent={HeaderButton}>
<Item
title='profile'
iconName='ios-star'
onPress={() => {
console.log('profile clicked');
}} />
<Item
title='more'
iconName='md-more'
onPress={() => {
console.log('more clicked');
}} />
</HeaderButtons>
)
};
};
export default HomeScreen;
const styles = StyleSheet.create({
mainBody: {
flex: 1,
justifyContent: 'center',
backgroundColor: COLORS.background,
paddingTop: '3%',
},
searchContainer: {
flex: 1,
flexDirection: 'row',
},
tabBar: {
paddingBottom: '3%',
},
topBar: {
width: 150,
borderWidth: 1,
borderRadius: 20,
borderColor: COLORS.primary_blue,
padding: '5%',
marginLeft: '5%',
},
textStyle: {
color: COLORS.primary_blue,
textAlign: 'center',
fontWeight: 'bold',
fontSize: 14,
},
formField: {
flex: 4,
borderWidth: 1,
padding: '4%',
marginLeft: '2%',
borderRadius: 10,
borderColor: COLORS.gray,
backgroundColor: COLORS.gray,
fontSize: 15,
height: '35%',
},
saveFormField: {
flex: 0.5,
justifyContent: 'space-between',
alignItems: 'center',
margin: 10,
},
buttonView: {
position: 'absolute',
bottom: 0,
left: 0,
},
});
Thank you.
I ran into this error a couple of times. RN doesn't like extra spaces in tags. try removing the spaces before and after {topBarItems.item.category}
<Text style={styles.textStyle}>{topBarItems.item.category}</Text>
I have an array of items which I have retrieved from an Object. The array has 5 items. It looks like this:
I have saved the array in my state as :
this.state={
serviceDetails: planDetails[0].nbs_plans.map(service => service.extension_attributes.productServicetList.map(name=>name.name)),
}
Now, I am trying to render the array in my component using map function like :
{
this.state.serviceDetails.map((serviceName) => {
return (
<SelectableChips initialChips={serviceName} />
);
})
}
But the problem is all the arrays are coming together at the same place as shown below:
The way it should be is : The first "See more" should be at the first section, the 2nd at the 2nd and so on.
My complete code for this component looks like this:
//This is an example code for FlatList//
import React from 'react';
import {
StyleSheet, FlatList, Text, View, Alert , Image, TouchableOpacity
} from 'react-native';
import SelectableChips from '../../../components/Chip/SelectableChips';
import CheckBox from '../../../components/CheckBox';
import propTypes from 'prop-types';
import Service from './Service';
import { planDetails } from '../../../api/mockedData/PlanServiceDetails';
class Selected_Items_Array {
constructor() {
selectedItemsArray = [];
this.state = {
planName: planDetails[0].nbs_plans.map(data => data.name),
serviceDetails: planDetails[0].nbs_services.map(data => data.service_line),
};
var result = planDetails.filter(d => {
return d.nbs_plans[0].name = "TruComplete℠ Lawn Care Plan";
});
// alert(Object.keys(planDetails).length);
// alert(Object.keys(planDetails[0].nbs_plans).length);
// alert(JSON.stringify(planDetails[0].nbs_plans[0].productId));
// alert(JSON.stringify(planDetails[0].nbs_plans[0].name));
// alert(JSON.stringify(planDetails[0].nbs_plans.map(data => data.name)));
}
pushItem(option) {
selectedItemsArray.push(option);
}
getArray() {
return selectedItemsArray;
}
}
export default class Services extends React.Component {
constructor(props) {
super(props);
this.state = {
// FlatListItems: [
// { id: '1', value: 'TruGreen Mosquito Defense' ,applicationType:'annual' },
// { id: '2', value: 'Sprinkler Maintenance Program' ,applicationType:'first' },
// { id: '3', value: 'Soil Treatment to balance the PH of the lawn-' ,applicationType:'priceper'},
// { id: '4', value: 'Tree & Shrub Care' ,applicationType:'customquote'},
// ],
planName: planDetails[0].nbs_plans.map(data=>data.name),
serviceDetails: planDetails[0].nbs_plans.map(service => service.extension_attributes.productServicetList.map(name=>name.name)),
};
selectedArrayOBJ = new Selected_Items_Array();
alert(JSON.stringify(planDetails[0].nbs_plans.map(data => data.name)));
alert(JSON.stringify(planDetails[0].nbs_plans[0].extension_attributes.productServicetList.map(data=> data.name)));
alert(JSON.stringify(planDetails[0].nbs_plans.map(service => service.extension_attributes.productServicetList.map(name=>name.name))));
alert(this.state.planName);
alert(this.state.serviceDetails);
}
FlatListItemSeparator = () => {
return (
//Item Separator
<View
style={{ height: 7, width: '100%', backgroundColor: 'transparent' }}
/>
);
};
GetItem(item) {
//Function for click on an item
Alert.alert(item);
}
render() {
return (
<View style={styles.MainContainer}>
<FlatList
data={this.state.planName}
//data defined in constructor
ItemSeparatorComponent={this.FlatListItemSeparator}
//Item Separator View
renderItem={({ item }) => (
// Single Comes here which will be repeatative for the FlatListItems
<View style={styles.cellContainerStyle} >
<View backgroundColor = {"transparent"} flexDirection = {'row'} justifyContent= {'flex-start'} margin={0}>
<View backgroundColor={'#73c573'} justifyContent= {'center'} alignItems={'center'} width={35} height={35} marginTop={0} paddingTop={0}>
<View backgroundColor={'#73c573'} width={25} height={25}>
<CheckBox size={25}
keyValue={1}
selectedArrayObject={selectedArrayOBJ}
checked={false}
label = ''
color="transparent"
labelColor="#00703c"
checkBoxClick={this.checkBoxOnClicked}/>
</View>
</View>
<View flex={1.75} backgroundColor={'transparent'} marginLeft={5}>
<Text style={{ color: '#00703c', fontSize: 21, fontFamily: 'SourceSansPro-Bold' }}> {item}</Text>
</View>
<View flex={0.15} marginTop={10}>
<TouchableOpacity style = {{ backgroundColor: 'transparent' }} onPress = {this.props.seeMore} >
<Image source={require('../../../assets/img/iOS/chevron_right.png')} style={styles.rightArrowImageStyle}/>
</TouchableOpacity>
</View>
</View>
<View style={styles.cellSubViewTwo}>
<Text style = {styles.textHeaderStyle}>This plan includes:</Text>
<View backgroundColor = {"transparent"} flexDirection='column' marginTop={5}>
{
this.state.serviceDetails.map((serviceName) => {
return (
<SelectableChips selectedChipStyle={selectableStyles} initialChips={serviceName} onChangeChips={(chips) => console.log(chips)} alertRequired={false} backgroundColor={"transparent"}
subView={
<TouchableOpacity style = {{ backgroundColor: 'transparent' }} onPress = {this.props.seeMore} >
<View backgroundColor={'transparent'} flexDirection = {'row'} alignItems= {'center'} marginLeft={5}>
<Text style={styles.seeMoreStyle}>See more</Text>
<Image source={require('../../../assets/img/iOS/chevron_right.png')} style={styles.rightArrowSeeMoreImageStyle}/>
</View>
</TouchableOpacity>
}/>
);
})
}
</View>
</View>
<Service serviceType={item.applicationType} isButton={false}/>
</View>
)}
/>
</View>
);
}
checkBoxOnClicked() {
if (selectedArrayOBJ.getArray().length == 0) {
//Alert.alert('CheckBox UnChecked');
} else {
// Alert.alert('CheckBox Checked');
}
}
}
Services.propTypes = { seeMore: propTypes.string.isRequired };
const styles = StyleSheet.create({
MainContainer: {
justifyContent: 'center',
margin: 7,
backgroundColor: 'transparent',
},
cellContainerStyle: {
padding: 0,
fontSize: 18,
flexDirection: 'column',
backgroundColor: '#ffffff',
borderColor: 'lightgray',
borderWidth: 0.5,
},
cellSubViewOne: {
flexDirection: 'row',
},
cellSubViewTwo: {
flexDirection: 'column',
marginLeft: 15,
backgroundColor: "#ffffff",
marginTop: 15,
},
cellSubViewThree: {
flexDirection: 'column',
marginLeft: 0,
backgroundColor: "#eff5ef",
marginTop: 15,
},
textHeaderStyle: {
color: '#73c573',
fontSize: 10.5,
fontFamily: "SourceSansPro-SemiBold",
},
rightArrowImageStyle: {
height: 12,
width: 12,
resizeMode: 'center',
alignItems: 'center',
tintColor: '#a6a6a6',
},
rightArrowSeeMoreImageStyle: {
height: 8,
width: 8,
resizeMode: 'center',
alignItems: 'center',
tintColor: '#ff9933',
},
seeMoreStyle: {
fontSize: 11,
color: '#ff9933',
fontFamily: "SourceSansPro-SemiBold",
},
});
const selectableStyles = StyleSheet.create({
chip: {
backgroundColor: '#73c573',
borderColor: '#73c573',
borderWidth: 1,
margin: 3,
padding: 0,
borderRadius: 5,
alignItems: 'center',
justifyContent: 'center',
},
valueStyle: {
color: '#ffffff',
fontSize: 12,
fontFamily: "SourceSansPro-Regular",
},
chipSelected: {
backgroundColor: '#73c573',
borderColor: '#73c573',
borderWidth: 1,
margin: 3,
padding: 0,
borderRadius: 5,
alignItems: 'center',
justifyContent: 'center',
},
valueStyleSelected: {
color: '#ffffff',
fontSize: 12,
fontFamily: "SourceSansPro-Regular",
},
});
Can someone please guide me how to proceed.
As each plan has as productServicetList, create a object serviceDetails where the key is the planName and the value is productServicetList.
this.state={
serviceDetails: planDetails[0].nbs_plans.reduce(
(acc, service) => ({
...acc,
[service.name]: service.extension_attributes.productServicetList.map(
name => name.name
)
}),
{}
);
}
Then render the serviceDetail as follows
{
this.state.serviceDetails[item].map(serviceName => {
return <SelectableChips initialChips={serviceName} />;
});
}
I am learning react native for the first time for developing android app not IOS one and I was learning from Building a Simple ToDo App With React Native and Firebase tutorial from youtube.But I am getting an error while trying to add items. I get following error
Firebase.push failed: first argument contains an invalid key($$typeof) in property 'restaurant.restaurant_name.targetInst._nativeParent._currentElement'.keys must be non-empty strings and cant contain ".","#","$","/","["
What might be creating this issue?
import React, { Component } from 'react';
import Firebase from 'firebase';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight,
TextInput,
ListView
} from 'react-native';
class foodOrderSystem extends Component {
constructor(props){
super(props);
const firebaseRef = new Firebase('foodordersystem.firebaseio.com');
console.log(firebaseRef);
this.itemRef = firebaseRef.child('restaurant');
this.state = {
newRestaurant:'',
// estimated_delivery:'',
// description:'',
restaurantSource: new ListView.DataSource({rowHasChanged: (row1,row2) => row1 !== row2})
};
this.restaurant = [ ];
}
componentDidMount() {
this.itemRef.on('child_added', (snap) => {
this.restaurant.push({
id:snap.key(),
text:snap.val()
});
this.setState({
restaurantSource:this.state.restaurantSource.cloneWithRows(this.restaurant)
});
});
this.itemRef.on('child_removed', (snap) => {
this.restaurant = this.restaurant.filter((x) => x.id !== snap.key());
this.setState({
restaurantSource:this.state.restaurantSource.cloneWithRows(this.restaurant)
});
});
}
addRestaurant(){
if(this.state.newRestaurant !== ''){
this.itemRef.push({
restaurant_name: this.state.newRestaurant
});
this.setState({ newRestaurant:''});
}
}
removeRestaurant(rowData){
this.itemRef.child(rowData.id).remove();
}
render() {
return (
<View style={styles.appContainer}>
<View style={styles.titleView}>
<Text style={styles.titleText}>
foodOrderSystem
</Text>
</View>
<View style={styles.inputcontainer}>
<TextInput
style={styles.input}
onChange={(text) => this.setState({newRestaurant:text})}
value={this.state.newRestaurant} />
<TouchableHighlight
style={styles.button}
onPress={ () => this.addRestaurant() }
underlayColor="#00ffff">
<Text style={styles.btnText}>Add</Text>
</TouchableHighlight>
</View>
<ListView
dataSource={this.state.restaurantSource}
renderRow={this.renderRow.bind(this)} />
</View>
);
}
renderRow(rowData){
return(
<TouchableHighlight
underlayColor="#dddddd"
onPress={() => this.removeRestaurant(rowData)}>
<View>
<View style={styles.row}>
<Text style={styles.todoText}>{rowData.text}</Text>
</View>
<View style={styles.separator} />
</View>
</TouchableHighlight>
);
}
}
const styles = StyleSheet.create({
appContainer:{
flex: 1
},
titleView:{
backgroundColor: '#48afdb',
paddingTop: 30,
paddingBottom: 10,
flexDirection: 'row'
},
titleText:{
color: '#fff',
textAlign: 'center',
fontWeight: 'bold',
flex: 1,
fontSize: 20,
},
inputcontainer: {
marginTop: 5,
padding: 10,
flexDirection: 'row'
},
button: {
height: 36,
flex: 2,
flexDirection: 'row',
backgroundColor: '#48afdb',
justifyContent: 'center',
color: '#FFFFFF',
borderRadius: 4,
},
btnText: {
fontSize: 18,
color: '#fff',
marginTop: 6,
},
input: {
height: 36,
padding: 4,
marginRight: 5,
flex: 4,
fontSize: 18,
borderWidth: 1,
borderColor: '#48afdb',
borderRadius: 4,
color: '#48BBEC'
},
row: {
flexDirection: 'row',
padding: 12,
height: 44
},
separator: {
height: 1,
backgroundColor: '#CCCCCC',
},
todoText: {
flex: 1,
},
});
AppRegistry.registerComponent('foodOrderSystem', () => foodOrderSystem);
Here is the attachment of error