Develop Reference

How to implement multiselect using Flatlist in react native?

I am trying to create a flatlist with text,but it selects only single value but i want to select multiple values from the list. and i also need color change for selected item. Here i am fetching data from api.
Here is my code:
import React from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { FlatList } from "react-native";
import {
stepDone,
setInputData,
} from "../../actions";
import Options from "../../components/Options";<----- It is a component Here define the flatlist
class Qualifier extends React.Component {
_afterQualifierSelected = (id, name) => {
const { stepDone, setInputData, input, updateSymptom } = this.props,
symptomId = input.symptomIds[input.symptomIds.length - 1],
currentSymptom = input.symptoms.filter(entry => entry.id === symptomId),
symptom = currentSymptom ? currentSymptom[0] : {};
symptom.qualifier = id;
setInputData("qualifier", { id, name });
stepDone("qualifierSelected");
};
render = () => {
return (
<Options
data={this.qualifiers}
exclusive={true}
onSelect={this._afterQualifierSelected}
/>
)
}
}
options.js
export default class Options extends React.PureComponent {
static propTypes = {
data: PropTypes.array.isRequired,
extraData: PropTypes.object,
exclusive: PropTypes.bool.isRequired,
onSelect: PropTypes.func.isRequired,
onDone: PropTypes.func
};
_keyExtractor = (item, index) =>
"undefined" === typeof item.id
? index.toString()
: "string" === typeof item.id
? item.id
: item.id.toString();
_renderItem = ({ item }) => {
const { onSelect } = this.props;
return <Item id={item.id} text={item.name} onPress={onSelect} />;
};
render = () => {
const { data, extraData, exclusive, onDone } = this.props;
return (
<View style={styles.container}>
<View style={styles.listContainer}>
<FlatList
data={data}
extraData={extraData}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
/>
</View>
{!exclusive && (
<Button
style={styles.done}
onPress={onDone}
title={Language.done}
accessibilityLabel={Language.optionsDoneAccessibility}
/>
)}
</View>
);
};
}
How should i implement multi select in this flat list using react native?
Can somebody help me to solve this issue?

Check out the multi-select-flatlist example from the official docs. The ListItems are components with their own state & props. You can pass them down whenever your List-component receives a click and do some magic with conditional rendering.

why is boolean returning True through this.props in react native

I have a file, check.js, for my nav to check if the name is not set, it should show the addNameScreen and phoneNumberScreen components but when I use the props to get the value of the boolean it returns true but I need this to be false so that when the users add their name it changes the value to true in check.js.
My question is: how the hell is it returning the value true? and how would I be able to return the value to change the state in check.js when the user has added the name?
Check.js
import React from 'react';
import {StyleSheet, Text, View } from 'react-native';
import MainNav from './MainNav';
import addNameScreen from '../screens/auth/addNameScreen';
import PhoneNumberScreen from '../screens/auth/PhoneNumberScreen';
export default class Check extends React.Component{
constructor(props){
super(props);
this.state = {
isNameSet: false,
isPhoneNumberSet: false,
}
}
render(){
if(this.state.isNameSet == false){
return <AddNameScreen isNameSet />
}else if(this.state.isPhoneNumberSet == false){
return <PhoneNumberScreen isPhoneNumberSet/>
}else{
return <MainNav />
}
}
}
export {Check};
AddNameScreen.js
import React from 'react';
import {StyleSheet, Text, TextInput, View, Alert, Image,
KeyboardAvoidingView, Button} from 'react-native';
import * as firebase from 'firebase';
import {Input} from './../../components/input';
import MainScreen from '../MainScreen';
import PhoneNumberScreen from './PhoneNumberScreen';
export default class AddNameScreen extends React.Component {
constructor(){
super();
this.state = {
currentUser: '',
Name: '',
error: '',
};
}
componentDidMount() {
var currentUser = firebase.auth().currentUser;
this.setState({ currentUser })
if (currentUser != null) {
email = currentUser.email;
}
}
addName = () => {
if(this.state.Name != ""){
var Name = this.state.Name;
firebase.auth().onAuthStateChanged(function(currentUser) {
if (currentUser) {
// User is signed in.
firebase.database().ref('users/'+uid).set(
{
Name: Name,
email: email,
}
).then(() =>{ // name has been added.
this.updateName;
return <Check/>
}).catch((error) => {
Alert.alert('Unknown error!');
});
} else {
// User is signed out.
// ...
}
});
}else{
this.setState({ error: 'Please enter your name!' }, () => {
this.state.error;
});
}
}
render(){
return (
<View style={[ styles.container, {flex: 1, backgroundColor: 'rgb(75, 2, 112)',}]}>
<KeyboardAvoidingView behavior="padding" enabled>
<View style={styles.container}>
<Input
placeholder='Enter your name'
placeholderTextColor='rgba(255,255,255,0.4)'
label='Enter your name?'
onChangeText={Name => this.setState({Name})}
value={this.state.Name}
/>
<Button
title="Next"
color="#fff"
accessibilityLabel="Next"
onPress={this.addName}
/>
<Text>{String(this.props.isNameSet)}</Text> //this print true
<Text>{this.state.error}</Text>
</View>
</KeyboardAvoidingView>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
export {AddNameScreen};

Thanks for the question. I see in your code you are declaring props like so in Check.js
<MyComponent somePropName />
This by default sets somePropName to be true you should be setting the prop to a value (by using your state) like so:
<AddNameScreen isNameSet={this.state.isNameSet} />
To pass values back when you need to update state in the parent component, such as passing values from back to you need to use a callback function that you can invoke from .
This is done like the following:
<AddNameScreen isNameSet={this.state.isNameSet} updateName={this.updateName} />
Where updateName should be a function in your Check that updates its state such as:
updateName = (name) => {
this.setState({isNameSet: true})
}
This function can then be used in the AddNameScreen by calling the props value through this.props.updateName().
The React documentation has a much better explanation on how to do this commonly called 'state hoisting' of 'lifting state up' and can be found here: https://reactjs.org/docs/lifting-state-up.html
Jacob.

React Native: Component rerender but props has not changed

I'm encountering this strange issue that I can figure out why is happing.
This should not be happening since the prop passed down to the History component has not been updated.
./components/History.js
...
const History = ({ previousLevels }) => {
return (
<ScrollView style={styles.container}>
{previousLevels.reverse().map(({ date, stressValue, tirednessValue }) => {
return (
<CardKBT
key={date}
date={date}
stressValue={stressValue}
tirednessValue={tirednessValue}
/>
)
})}
</ScrollView>
)
}
...
export default History
As can be seen in this code (below), the prop to the History is only updated once the user press Save.
App.js
import React from 'react'
import { View, ScrollView, StyleSheet } from 'react-native'
import { AppLoading, Font } from 'expo'
import Store from 'react-native-simple-store'
import { debounce } from 'lodash'
import CurrentLevels from './components/CurrentLevels'
import History from './components/History'
export default class App extends React.Component {
constructor(props) {
super(props)
this.state = {
isLoadingComplete: false,
currentLevels: {
stressValue: 1,
tirednessValue: 1,
},
previousLevels: [],
}
this.debounceUpdateStressValue = debounce(this.onChangeStressValue, 50)
this.debounceUpdateTirednessValue = debounce(
this.onChangeTirednessValue,
50
)
}
async componentDidMount() {
const previousLevels = await Store.get('previousLevels')
if (previousLevels) {
this.setState({ previousLevels })
}
}
render() {
const { stressValue, tirednessValue } = this.state.currentLevels
if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
return (
<AppLoading
...
/>
)
} else {
return (
<View style={{ flex: 1 }}>
<CurrentLevels
stressValue={stressValue}
onChangeStressValue={this.debounceUpdateStressValue}
tirednessValue={tirednessValue}
onChangeTirednessValue={this.debounceUpdateTirednessValue}
onSave={this.onSave}
/>
<History previousLevels={this.state.previousLevels} />
</View>
)
}
}
...
onChangeStressValue = stressValue => {
const { tirednessValue } = this.state.currentLevels
this.setState({ currentLevels: { stressValue, tirednessValue } })
}
onChangeTirednessValue = tirednessValue => {
const { stressValue } = this.state.currentLevels
this.setState({ currentLevels: { stressValue, tirednessValue } })
}
onSave = () => {
Store.push('previousLevels', {
date: `${new Date()}`,
...this.state.currentLevels,
}).then(() => {
Store.get('previousLevels').then(previousLevels => {
this.setState({
currentLevels: { stressValue: 1, tirednessValue: 1 },
previousLevels,
})
})
})
}
}

The component will re-render when one of the props or state changes, try using PureComponent or implement shouldComponentUpdate() and handle decide when to re-render.
Keep in mind, PureComponent does shallow object comparison, which means, if your props have nested object structure. It won't work as expected. So your component will re-render if the nested property changes.
In that case, you can have a normal Component and implement the shouldComponentUpdate() where you can tell React to re-render based on comparing the nested properties changes.

Redux state not getting received as expected

I'm using redux for the first time and something subtle is getting by me.
I have a container called Dashboard that displays two SimpleTabs. A simple tab is component that gets pressed and returns a number to its container for the item pressed. I can see actions being dispatched, event handler firing etc but the state being received in mapStateToProps never contains the item values. This might be why the render is never getting fired because the state is not changed.
Note: I've used the Ignite boilerplate as a starting point. It makes use of reduxsauce so the DashboardRedux.js may look a little unusual.
Dashboard.js
import React, { Component } from 'react'
import { ScrollView, Text, View, Image, TouchableOpacity, StyleSheet } from 'react-native'
import moment from 'moment'
import { Images, Colors, Metrics, ApplicationStyles } from '../Themes'
import SimpleTab from '../Components/SimpleTab'
import DashboardHeader from '../Components/DashboardHeader'
import DashboardActions from '../Redux/DashboardRedux'
import { connect } from 'react-redux'
export class Dashboard extends Component {
//TODO make numbers into enums
constructor(props) {
super(props)
this.updateTimeframe = this.updateTimeframe.bind(this)
this.updateAnalysisView = this.updateAnalysisView.bind(this)
const curTimeframe = 0
const curAnalysisView = 0
this.state = {curTimeframe, curAnalysisView}
}
// Event handler for timeframe tab
updateTimeframe(newValue) {
//newValue gets received as expected
this.props.updateTimeframe(newValue)
}
// Event handler for analysisview tab
updateAnalysisView(newValue) {
this.props.updateAnalysisView(newValue)
}
getUpdateTime = () => {
let s = moment().format("h:mm a")
return s
}
// Takes us back to login
openLoginScreen = () => {
//TODO does navigater have notion of <back>?
this.props.navigation.navigate('LoginScreen')
}
// For info on flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
render () {
let styles = ApplicationStyles.screen
/*
let localStyles = StyleSheet.create({
container: {
paddingBottom: Metrics.baseMargin
},
centered: {
alignItems: 'center'
}
})
console.log(styles)
*/
return (
//Problem: this.props.curTimeframe is always undefined
<View style={styles.mainContainer}>
<DashboardHeader updateTime={this.getUpdateTime()}></DashboardHeader>
<View style={{justifyContent: 'space-between'}} >
<SimpleTab
onSelect={this.updateTimeframe}
curTab={this.props.curTimeframe}
tabNames={["TODAY", "1W", "1M", "3M", "6M"]}
/>
</View>
<View style={{flex:1}} >
<Text style={{color: Colors.snow}}>
Analytical stuff for {this.props.curTimeframe} and {this.props.curAnalysisView}
</Text>
</View>
<View style={{height:60, justifyContent: 'space-between'}} >
<SimpleTab
onSelect={this.updateAnalysisView}
curTab={this.props.curAnalysisView}
tabNames={["HOME", "DAYPART", "REC", "INGRED", "SETTINGS"]}
/>
</View>
</View>
)}
}
const mapStateToProps = (state) => {
// Problem: state passed never contains curAnalysisView or curTimeframe
return {
curAnalysisView: state.curAnalysisView,
curTimeframe: state.curTimeframe
}
}
const mapDispatchToProps = (dispatch) => {
return {
updateTimeframe: newValue => dispatch(DashboardActions.updateTimeframe(newValue)),
updateAnalysisView: newValue => dispatch(DashboardActions.updateAnalysisView(newValue))
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Dashboard);
DashboardRedux.js
import { createReducer, createActions } from 'reduxsauce'
import Immutable from 'seamless-immutable'
/* ------------- Types and Action Creators ------------- */
const { Types, Creators } = createActions({
updateTimeframe: ['newValue'],
updateAnalysisView: ['newValue'],
})
export default Creators
export const DashboardTypes = Types
/* ------------- Initial State ------------- */
export const INITIAL_STATE = Immutable({
curTimeframe: 0,
curAnalysisView: 0
})
/* ------------- Reducers ------------- */
export const updateTimeframe = (state, {newValue}) => {
//newValue gets passed as expected
return state.merge({curTimeframe: newValue});
}
export const updateAnalysisView = (state, {newValue}) => {
return state.merge({curAnalysisView: newValue});
}
/* ------------- Hookup Reducers To Types ------------- */
export const reducer = createReducer(INITIAL_STATE, {
[Types.UPDATE_TIMEFRAME]: updateTimeframe,
[Types.UPDATE_ANALYSIS_VIEW]: updateAnalysisView
})
SimpleTab.js
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { View, Text, Image, StyleSheet, TouchableHighlight } from 'react-native'
import { Colors, Metrics, Fonts, Images } from '../Themes/'
import styles from '../Themes/ApplicationStyles'
export default class SimpleTab extends Component {
static defaultProps = {
onSelect: null,
curTab: 0,
tabNames: ["Tab1", "Tab2", "Tab3"]
}
static propTypes = {
onSelect: PropTypes.func,
curTab: PropTypes.number,
tabNames: PropTypes.array
}
tabSelected = (tabNum) => {
this.props.onSelect(tabNum);
}
renderTabBar = () => {
let localStyles = StyleSheet.create({
unselectedText: {
marginTop: Metrics.baseMargin,
marginHorizontal: Metrics.baseMargin,
textAlign: 'center',
fontFamily: Fonts.type.base,
fontSize: Fonts.size.regular,
color: Colors.snow
},
selectedText: {
marginTop: Metrics.baseMargin,
marginHorizontal: Metrics.baseMargin,
textAlign: 'center',
fontFamily: Fonts.type.base,
fontSize: Fonts.size.regular,
fontWeight: 'bold',
color: Colors.fire
}
})
let result = []
for (i=0; i<this.props.tabNames.length; i++) {
let tabStyle = (i == this.props.curTab) ? localStyles.selectedText : localStyles.unselectedText
result.push(
<TouchableHighlight key={this.props.tabNames[i]} onPress={this.tabSelected.bind(this, i)}>
<Text style={tabStyle}>{this.props.tabNames[i]}</Text>
</TouchableHighlight>
)
}
return result
}
render () {
console.log("rendering tab")
return (
<View flexDirection='row' style={styles.contentContainer}>
{this.renderTabBar()}
</View>
)
}
}

MapStateToProps receives the new state properties via reducers. Your MapStatetoProps in Dashboard.js should look like below to get the new values.
const mapStateToProps = (state) => {
// Problem: state passed never contains curAnalysisView or curTimeframe
//new state values should be accessed via reducers..
return {
curAnalysisView: state.updateAnalysisView['curAnalysisView'],
curTimeframe: state.updateTimeframe['curTimeframe']
}
}

the mapStateToProps should like:
const mapStateToProps = (state) => {
const stateObj = state.toJS()
return {
curAnalysisView: stateObj.curAnalysisView,
curTimeframe: stateObj.curTimeframe
}
}
the .toJS() function converts it from immutable object to JS object.
Also, the reducer should have a default case that just returns the current state for when there is no action passed.

It turned out I needed to specify the "dashboard" branch of the state tree like this:
const mapStateToProps = (state) => {
return {
curAnalysisView: state.dashboard.curAnalysisView,
curTimeframe: state.dashboard.curTimeframe
}
}

React Native multiple switches

On React-Native, I'm trying to create a screen with multiple switch components, with the possibility of selecting only one at once. When the component loads, only the first switch in on. if you click on it, it turns to off, but if you turn on another one, all the others turn to off.
I'm not sure I have the right approach here, as I'm confused about how to use the component state to do this.
In JS, I would do something like a function that turns all switch to off, but turn on the clicked one, but I don't understand how to this with state.
thanks in advance
import React from 'react'
import { ScrollView, Text, View, Switch } from 'react-native'
class switchScreen extends React.Component {
constructor (props) {
super(props)
this.state = {
trueSwitchIsOn: true,
falseSwitchIsOn: false
}
}
switch = (value) => {
this.setState({ falseSwitchIsOn: value, trueSwitchIsOn: !value })
}
render () {
return (
<View>
<Switch
onValueChange={this.switch}
value={this.state.trueSwitchIsOn}
/>
<Switch
onValueChange={this.switch}
value={this.state.falseSwitchIsOn}
/>
<Switch
onValueChange={this.switch}
value={this.state.falseSwitchIsOn}
/>
</View>
)
}
}

I believe a more optimal solution would minimize the amount of state, and possibility of inconsistent data. Using one state variable to keep track of which switch is active (if any) can solve your problem pretty easily.
import React from 'react'
import { ScrollView, Text, View, Switch } from 'react-native'
class switchScreen extends React.Component {
constructor (props) {
super(props)
this.state = {
activeSwitch: null,
}
}
// A simple toggle method that takes a switch number
// And toggles it between on / off
toggleSwitch = (switchNumber) => {
this.setState({
activeSwitch: switchNumber === this.state.activeSwitch ? null : switchNumber
})
};
//
switchOne = (value) => { this.toggleSwitch(1) };
switchTwo = (value) => { this.toggleSwitch(2) };
switchThree = (value) => { this.toggleSwitch(3) };
render () {
return (
<View>
<Switch
onValueChange={this.switchOne}
value={this.state.activeSwitch === 1}
/>
<Switch
onValueChange={this.switchTwo}
value={this.state.activeSwitch === 2}
/>
<Switch
onValueChange={this.switchThree}
value={this.state.activeSwitch === 3}
/>
</View>
)
}
}

import React from 'react'
import { ScrollView, Text, View, Switch } from 'react-native'
class switchScreen extends React.Component {
constructor (props) {
super(props)
this.state = {
switchone:false,
switchtwo:false,
switchthree:false,
}
}
switchOne = (value) => {
this.setState({ switchone: !value,
switchtwo:false,switchthree:false,
})
}
switchTwo = (value) => {
this.setState({ switchtwo: !value,
switchone:false,switchthree:false,
})
}
switchThree = (value) => {
this.setState({ switchtree: !value,
switchone:false,switchtwo:false,
})
}
render () {
return (
<View>
<Switch
onValueChange={this.switchOne}
value={this.state.switchone}
/>
<Switch
onValueChange={this.switchTwo}
value={this.state.switchtwo}
/>
<Switch
onValueChange={this.switchThree}
value={this.state.switchthree}
/>
</View>
)
}
}

You can try something like below, you can keep array of switch states, in the example its an associative key, but you can change according to your need, with multi level switch states. (pardon the code formatting but it give you the idea)
constructor(props) {
super(props);
this.state = {
switchStates: {
companyName: true
}
}
}
toggle(item, index) {
const switchStates = this.state.switchStates;
switchStates[index] = !switchStates[index];
console.log(switchStates);
this.setState({ switchStates });}
render switch
<Switch
onValueChange={isSwitchOn =>
this.toggle({ isSwitchOn }, "companyName")
}
value={this.state.switchStates.companyName}
/>