Develop Reference

React native : Flatlist inside scrollview

My goal is for this entire block to be scrollable.
I tried all kinds of ways to achieve the goal but without success.
I tried with ListHeaderComponent and moved the entire top view to it and it didn't work.
And I also tried <FlatList nestedScrollEnabled />
And it didn't work either.
What is the correct way to reach the scroll?
I come from here :
const renderAccordians = () => {
const items: JSX.Element[] = [];
areaData.forEach(item => {
items.push(<Accordian item={item} key={item.title} />);
});
return items;
};
To here :
return (
<View>
<View style={styles.row}>
<TouchableOpacity onPress={() => onClickFather()}>
<MaterialIcons size={24} name={data.checked ? 'check-box' : 'check-box-outline-blank'} color={'black'} />
</TouchableOpacity>
<Text style={[styles.title]}>{data.title}</Text>
<TouchableOpacity style={styles.row} onPress={() => toggleExpand()}>
<MaterialIcons name={expanded ? 'arrow-drop-up' : 'arrow-drop-down'} size={30} color={'black'} />
</TouchableOpacity>
</View>
<View style={styles.parentHr} />
{expanded && (
<FlatList
data={data.data}
numColumns={1}
scrollEnabled={false}
renderItem={({ item, index }) => (
<View>
<TouchableOpacity style={[styles.childRow, styles.button]} onPress={() => onClick(index)}>
<MaterialIcons
size={24}
name={item.checked ? 'check-box' : 'check-box-outline-blank'}
color={'black'}
/>
<Text style={[styles.itemInActive]}>{item.key}</Text>
</TouchableOpacity>
<View style={styles.childHr} />
</View>
)}
/>
)}
</View>
);

Since your FlatList will be part of an Accordion component, you "can't" embed the ExpandButton inside the Flatlist > ListHeaderComponent ... cause It'll simply hide the whole FlatList along with it's Header when you collapse your accorddion...
keyExtractor is also missing in your FlatList .. I added index as a key here which is not recommended BTW, you better use a unique field in your listItem like id...
return (
<View style={{ flex: 1}}> // <<--- Look here
<View style={styles.row}>
<TouchableOpacity onPress={() => onClickFather()}>
<MaterialIcons
size={24}
name={data.checked ? 'check-box' : 'check-box-outline-blank'}
color={'black'}
/>
</TouchableOpacity>
<Text style={[styles.title]}>{data.title}</Text>
<TouchableOpacity style={styles.row} onPress={() => toggleExpand()}>
<MaterialIcons
name={expanded ? 'arrow-drop-up' : 'arrow-drop-down'}
size={30}
color={'black'}
/>
</TouchableOpacity>
</View>
<View style={styles.parentHr} />
{expanded && (
<FlatList
data={data.data}
numColumns={1}
scrollEnabled={true} // <<--- Look here
keyExtractor={(_, index) => index.toString()} // <<=== Look here
contentContainerStyle={{flexGrow: 1}} // <<--- Look here
renderItem={({ item, index }) => (
<View>
<TouchableOpacity
style={[styles.childRow, styles.button]}
onPress={() => onClick(index)}
>
<MaterialIcons
size={24}
name={item.checked ? 'check-box' : 'check-box-outline-blank'}
color={'black'}
/>
<Text style={[styles.itemInActive]}>{item.key}</Text>
</TouchableOpacity>
<View style={styles.childHr} />
</View>
)}
/>
)}
</View>
);

If it does not work, I think you should create a component and use map datalist to render all the items and putting them into the ScrollView tag.
<ScrollView
style={styles.messageContain}
ref={ref => {
this.scrollView = ref;
}}
{data.data.map((item, index) => {
return <YourComponent key={index} data={item} />;
})}
</ScrollView>

localStorage doesn't work in TouchableOpacity tag

I want to use localStorage and move to another page at the same time, but only moving work, I can't get the value
const pressHandlerMapTest = () => {
navigation.navigate("TestMapScreen");
};
return (
<ImageBackground style={styles.background}>
<View style={styles.tourWindow}>
<TouchableOpacity underlayColor="red"
onPress={pressHandlerMapTest}
onPressIn={() => {
localStorage.setItem('tour', 'others');
}}>
<Image source={require("../assets/royals.png")} ></Image>
</TouchableOpacity>
</View>
</ImageBackground>
);

const pressHandlerMapTest = () => {
localStorage.setItem('tour', 'others');
navigation.navigate("TestMapScreen");
};
return (
<ImageBackground style={styles.background}>
<View style={styles.tourWindow}>
<TouchableOpacity underlayColor="red"
onPress={pressHandlerMapTest}
>
<Image source={require("../assets/royals.png")} ></Image>
</TouchableOpacity>
</View>
</ImageBackground>
);

React Native - undefined is not an object (evaluating 'number.toFixed')

I am a newbie, I'm having trouble getting the number format when passing data from flatList to modal. It is worth mentioning here that when I format in the flatlist, it does not have an error, but when transferred to the modal, it fails.
>TypeError: undefined is not an object (evaluating 'number.toFixed')
Declaration functions
const [{user}, dispatch] = useValueContext();
const navigation = useNavigation();
const [data, setData] = useState([]);
const [modalVisible, setModalVisible] = useState(false);
const [selectedItem, setSelectedItem] = useState([]);
const [maxId, setMaxId] = useState('0');
const [loading, setLoading] = useState(false);
const [isListEnd, setIsListEnd] = useState(false);
const [modalFilterVisible, setModalFilterVisible] = useState(false);
const handleOnSelectItem = ({item}) => {
setSelectedItem(item);
};
const handleOnCloseModal = () => {
setSelectedItem([]);
};
Modal function
const ModalView = ({item}) =>{
return(
<Modal
animationType="none"
transparent={true}
visible={modalVisible}
onRequestClose={handleOnCloseModal}
>
<TouchableOpacity
style={styles.modal_content}
activeOpacity={1}
onPressOut={() => {setModalVisible(false)}}
>
<TouchableWithoutFeedback style={styles.modalView}>
<View style={styles.modal_header}>
<TouchableOpacity
style={{
marginEnd: 5
}}
onPress={() => {
setModalVisible(!modalVisible);
}}
>
<FontAwesome5 name="times" size={16} />
</TouchableOpacity>
</View>
<View style={styles.modal_body}>
<View style={{}}>
<Text style={styles.detail_content_name}>{item.MoneyAction_Name}</Text>
<View style={styles.detail_content_status}>
<Text style={styles.detail_content_status_text}>{item.MoneyStatus_Name}</Text>
</View>
{item.Money_Value > 0 ?
(<Text style={{color: '#56ab2f', fontSize: 17, textAlign: 'center'}}>+{item.Money_Value.toFixed(1).replace(/\d(?=(\d{3})+\.)/g, '$&,').replace(/\./g, ' ').replace(/\,/g, '.').replace(/\ /g, ',')} {item.Money_Ticker}</Text>)
:(<Text style={{color: '#e41318', fontSize: 17, textAlign: 'center'}}>{item.Money_Value.toFixed(1).replace(/\d(?=(\d{3})+\.)/g, '$&,').replace(/\./g, ' ').replace(/\,/g, '.').replace(/\ /g, ',')} {item.Money_Ticker}</Text>)
}
<View style={{marginBottom: 16, marginTop: 16, borderStartColor: 'rgba(0,0,0,.1)', borderWidth: .3, alignItems:'stretch'}}>
</View>
<View style={styles.detail_list}>
<Text>Nguồn tiền</Text>
<Text>Ví {item.Money_Ticker}</Text>
</View>
{item.Money_PartnerGiftCode !== '' ? (
<View style={styles.detail_list}>
<Text>Mã nâng cấp</Text>
<Text>{item.Money_PartnerGiftCode}</Text>
</View>
): null}
<View style={styles.detail_list}>
<Text>Phí giao dịch</Text>
</View>
<View style={styles.detail_list}>
<Text>Mã giao dịch</Text>
<Text>#632542</Text>
</View>
<View style={styles.detail_list}>
<Text>Thời gian</Text>
<Text>19/10/2020 23:21</Text>
</View>
</View>
</View>
</TouchableWithoutFeedback>
</TouchableOpacity>
</Modal>
);
}
Item function:
const Item = ({item}) => {
return(
<TouchableOpacity
style={styles.history_li}
onPress={() => {
handleOnSelectItem({item})
setModalVisible(true)
}}
>
<View style={styles.history_view}>
<View style={styles.history_view_left}>
<Text style={styles.history_view_left_name}>{item.MoneyAction_Name}</Text>
<Text style={styles.history_view_left_time}>
{new Date(item.Money_Time * 1000).getDate()}
/{new Date(item.Money_Time * 1000).getMonth()}
/{new Date(item.Money_Time * 1000).getFullYear()} {new Date(item.Money_Time * 1000).getHours()}
:{new Date(item.Money_Time * 1000).getMinutes()}
:{new Date(item.Money_Time * 1000).getSeconds()}
</Text>
</View>
<View style={styles.history_view_right}>
{item.Money_Value > 0 ?
(<Text style={styles.history_view_right_receive}>+{item.Money_Value.toFixed(1).replace(/\d(?=(\d{3})+\.)/g, '$&,').replace(/\./g, ' ').replace(/\,/g, '.').replace(/\ /g, ',')}</Text>)
:(<Text style={styles.history_view_right_pay}>{item.Money_Value.toFixed(1).replace(/\d(?=(\d{3})+\.)/g, '$&,').replace(/\./g, ' ').replace(/\,/g, '.').replace(/\ /g, ',')}</Text>)
}
<Text style={styles.history_view_right_currency}>{item.Money_Ticker}</Text>
</View>
</View>
</TouchableOpacity>
);
}
const _renderItem = ({item}) => {
return(
<Item item = {item} />
);
}
executable function
return (
<View style={styles.container}>
<View style={{padding: 5, flexDirection: 'row', justifyContent:'space-between'}}>
<View style={styles.HeaderScreen}>
<Image
style={styles.imgStyle}
source={require('../assets/images/vietsmile.png')}
/>
<Text style={styles.title}>Lịch sử</Text>
</View>
<View style={styles.bell}>
<Ionicons name="ios-notifications" size={26} color="#596475" />
</View>
<View lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
</View>
<View style={{backgroundColor: '#f1f2f3'}}>
<View style={styles.filter_menu}>
<TouchableOpacity
style={styles.shop_filter}
onPress={()=>{setModalFilterVisible(true)}}
>
<FontAwesome5 name="filter" size={16} color="#3696D9" />
<Text style={{marginLeft: 3, color: '#3696D9',}}>Bộ lọc</Text>
</TouchableOpacity>
</View>
<FlatList
data={data}
renderItem={_renderItem}
keyExtractor={item => item.Money_ID.toString()}
ListFooterComponent={renderFooter}
/>
</View>
{selectedItem !== [] ? (
<ModalView item={selectedItem} />
) : null}
</View>
);
Please help me

How can i set focus to only one TextInput in list item after TouchableOpacity pressed in this item?

I have a list of many items where each item has TextInput and TouchableOpacity wrapped by View.
I've trying to set focus on TextInput in the list item in which TouchableOpacity has been pressed. It's needed for editing each item's name.
Below is the code of how I tried to do this. The problem of this code is that after pressing on any of the TouchableOpacity the last TextInput will always be focused due to the fact that the last iteration overwrites textInputRef.
Is there a way to make textInputRef contain a reference to the TextInput which TouchableOpacity will press?
const ListComponent = ({list}) => {
const textInputValue = useRef('');
const textInputRef = useRef(null);
changeItemName = (text) => {
textInputValue.current = text;
};
return (
<ScrollView>
{list.length > 0 &&
list.map((item) => (
<View key={item._id}>
<TouchableOpacity>
<View
<Text>{`Item: `}</Text>
<TextInput ref={textInputRef} onChangeText={changeItemName}>
{item.name}
</TextInput>
</View>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
textInputValue.current = '';
}}>
<Icon name={'check'} size={25} color="#000" />
</TouchableOpacity>
<View>
<TouchableOpacity
onPress={() => {
textInputValue.current = item.name;
textInputRef.current.focus();
}}>
<Icon name={'edit'} size={25} color="#000" />
</TouchableOpacity>
</View>
</View>
))}
</ScrollView>
);
};

I think creating an array of ref will help you to resolve.
Try this way
const ListComponent = ({list}) => {
const textInputValue = useRef('');
const textInputRef = useRef(null);
changeItemName = (text) => {
textInputValue.current = text;
};
const collectionRef = useRef(list.map(() => createRef()));
return (
<ScrollView>
{list.length > 0 &&
list.map((item, index) => (
<View key={item._id}>
<TouchableOpacity>
<View
<Text>{`Item: `}</Text>
<TextInput ref={collectionRef.current[index]} onChangeText={changeItemName}>
{item.name}
</TextInput>
</View>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
textInputValue.current = '';
}}>
<Icon name={'check'} size={25} color="#000" />
</TouchableOpacity>
<View>
<TouchableOpacity
onPress={() => {
textInputValue.current = item.name;
collectionRef[index].current.focus();
}}>
<Icon name={'edit'} size={25} color="#000" />
</TouchableOpacity>
</View>
</View>
))}
</ScrollView>
);
};

ScrollView item data passed to parent is returning as undefined

I've been trying to understand why when passing data to a callback function from a scrollview item the parent component is receiving undefined. I have a console.log in the item component and it logs the correct value however the log in the parent component logs undefined... also the remove Item component successfully removes the component, however, the log in that function returns undefined aswell... At this point I'm not sure if it's the module I'm using or react-natives scrollView...
Thanks for any-help.
The child, Item compoent
render() {
const {data, active } = this.props;
const key = data.key;
console.log(key);
return (
<Animated.View style={[
styles.row,
this._style,
]}>
<Text style={styles.text}>{data.role}</Text>
<Text style={styles.nameText}>{data.name}</Text>
<TouchableOpacity onPress={() => {this.props.onRemove(key)}}>
<Text>X</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.props.modalTwo(key)}}>
<Text> E</Text>
</TouchableOpacity>
</Animated.View>
);
}
The parent component functions and render methods
_renderRow = ({data, active}) =>{
return <Role data={data} onRemove={() => {this.removeItem()}} modalTwo={() =>{this.openModalTwo()}}/>
}
removeItem = (key) => {
const newRoleList = this.state.roleList.slice();
console.log(key);
const roleIndex = newRoleList.findIndex(item => item.key === key);
console.log(key);
newRoleList.splice(roleIndex,1);
this.setState( {roleList: newRoleList});
}
openModalTwo = (key) => {
console.log(key);
const newObjectArray = this.state.roleList.slice();
console.log('newObjectArray: ',newObjectArray);
const editObject = newObjectArray.find(item => item.key === key );
console.log('editObject:',editObject);
this.setState({modalVisibleTwo:!this.state.modalVisibleTwo, editObject: editObject});
}
render(){
reindex = (indexes, sourceArray) => indexes.map(i => sourceArray[i]);
return(
<KeyboardAvoidingView
behavior="padding"
style={styles.listContainer}
>
<Modal
isVisible = {this.state.modalVisible}
onSwipe = {() => {this.setState({modalVisible: !this.state.modalVisible})}}
swipeDirection="right"
>
<View style={styles.modalContainer}>
<View style={styles.textInputContainer}>
<TextInput
style={styles.textInput}
placeholder={'Enter Role'}
underlineColorAndroid={'#ffffff'}
onChangeText={(text) => this.updateTextInput('role',text)}
/>
<TextInput
style={styles.textInput}
placeholder={'Enter Name'}
underlineColorAndroid={'#ffffff'}
onChangeText={(text) => this.updateTextInput('name',text)}
/>
</View>
<TouchableOpacity style={styles.buttonStyle} onPress={() => {this.state.nameInput && this.state.roleInput != '' ? this.addAnotherRole() : this.reset();}}>
<Text style={styles.buttonText}>{this.state.nameInput && this.state.roleInput != '' ? 'Update' : 'Close'}</Text>
</TouchableOpacity>
</View>
</Modal>
<Modal
isVisible = {this.state.modalVisibleTwo}
onSwipe = {() => {this.setState({modalVisibleTwo: !this.state.modalVisibleTwo})}}
swipeDirection="right"
>
<View style={styles.modalContainer}>
<View style={styles.textInputContainer}>
<TextInput
style={styles.textInput}
placeholder={'Enter Role'}
underlineColorAndroid={'#ffffff'}
// value={this.state.editObject.role}
onChangeText={(text) => this.updateTextInput('role',text)}
/>
<TextInput
style={styles.textInput}
placeholder={'Enter Name'}
underlineColorAndroid={'#ffffff'}
// value={this.state.editObject.name}
onChangeText={(text) => this.updateTextInput('name',text)}
/>
</View>
<TouchableOpacity style={styles.buttonStyle} onPress={() => {this.state.nameInput && this.state.roleInput != '' ? this.addAnotherRole() : this.reset();}}>
<Text style={styles.buttonText}>{this.state.nameInput && this.state.roleInput != '' ? 'Update' : 'Close'}</Text>
</TouchableOpacity>
</View>
</Modal>
<Text style={styles.taskTitle}>Company Roles</Text>
<Text style={styles.introBlurb}>Paragraph On how to use this component</Text>
<View style={styles.titleContainer}>
<Text style={styles.title}>Title</Text>
<Text style={styles.title}>Name</Text>
</View>
<SortableList
style={styles.List}
data={this.state.roleList}
renderRow={this._renderRow}
// onChangeOrder ={(nextOrder) => {this.setState({ roleList: reindex(nextOrder, this.state.roleList)})}}
/>
<TouchableOpacity style={styles.addButton} onPress={() =>{this.setState({modalVisible: !this.state.modalVisible})}}>
<Text style={styles.addText}>Add another role</Text>
</TouchableOpacity>
</KeyboardAvoidingView>
);
}
}
Module I'm using: https://www.npmjs.com/package/react-native-sortable-list

You're not passing the parameter along for the callback prop in _renderRow. For example,
onRemove={() => {this.removeItem()}}
should either be:
onRemove={(key) => {this.removeItem(key)}}
or just:
onRemove={this.removeItem}