ScrollView inside Actionsheet doesn't scroll in android - react-native

Facing an issue where scrolling doesn't take effect in android but, in IOS works fine.
I tried using contentContainerStyle and wrapping the Scrollview with View but nothing changed.
<Actionsheet isOpen={isOpen} onClose={onClose}>
<Actionsheet.Content position={"absolute"} bottom={"0"}>
<Stack space={8} width={"100%"} px={"4"} py={"5"}>
<PrimaryText fontWidth={"bold"} fontSize={"lg"}>
{question}
</PrimaryText>
<Input
// double bind with the hook
value={searchInput}
onChangeText={(value) => setSearchInput(value)}
// style the input field
placeholder={t("commonComponents.search")}
variant={"unstyled"}
p={"3"}
textAlign={I18nManager.isRTL ? "right" : "left"}
fontFamily={fonts[i18n.language].medium}
fontSize={16}
borderWidth={"1"}
borderColor={colors.gray[200]}
InputRightElement={
<Box mr={"2"}>
<EvilIcons name="search" size={30} color={colors.gray[400]} />
</Box>
}
/>
<HStack justifyContent={"space-between"}>
<PrimaryText fontWidth={"medium"} fontSize={"sm"}>
{t("commonComponents.allItems")}
</PrimaryText>
<PrimaryText fontSize={"sm"} color={colors.gray[400]}>
{t("commonComponents.selected", {
selLength: selectedList.length,
})}
</PrimaryText>
</HStack>
<ScrollView height={"300"}>
{optionsList
.filter(
(opt) =>
opt.name_en
.toLowerCase()
.includes(searchInput.toLowerCase()) ||
opt.name_ar
.toLowerCase()
.includes(searchInput.toLowerCase())
)
.map((item) => {
return (
<SelectTile
key={item.id}
icon={item.icon}
title={item["name_" + i18n.language]}
isSelected={selectedList.some(
(selItem) => selItem.id === item.id
)}
/>
);
})}
</ScrollView>
</Stack>
</Actionsheet.Content>
</Actionsheet>
This part is the only part I want to scroll to work on.
In the end, I want to achieve multi-select features inside an ActionSheet.

Related

Toopltip inside IconButton not visible on tap

I have an iconButton box and inside it, I have a Tooltip icon like below:
<IconButton
Icon={() =>
<View>
{p.s === "app" && (<Tooltip label="App" bg="#FFF" _text={{color:"#000"}}>
<AntDesign name="checkcircle" size={24} color="#58C064" /></Tooltip>
<View>
<Image source={icons.pict}/>
</View>
</View>
}
onPress={() => navigation.navigate(...})}
/>
I long tap on the check circle icon on mobile but do not see the tooltip, it instead interprets it as a press and executes on Press.
I tried separating icons from images like
<View>
{p.s === "app" && (<Tooltip label="App" bg="#FFF" _text={{color:"#000"}}>
<AntDesign name="checkcircle" size={24} color="#58C064" /></Tooltip>
<IconButton
Icon={() =>
<View>
<View>
<Image source={icons.pict}/>
</View>
</View>
}
onPress={() => navigation.navigate(...})}
/>
</View>
but it still does not show up in the tooltip although the button press is now focused on just the image.
How would the tooltip show up?

KeyboardAvoidingView, ScrollView and Flatlist in a form

I have a form where I am using KeyboardAvoidingView and ScrollView so that when a user clicks on an input field the screen will scroll to that particular field
Within my form I have an input field that is searchable and I am using a FlatList to display the results for the user to choose from. Currently I am getting the error:
VirtualizedLists should never be nested inside plain ScrollViews
I've looked at many posts around this but am yet to find a solution (unless I've missed something):
1 - How to put FlatList inside of the ScrollView in React-native?
2 - FlatList inside ScrollView doesn't scroll
3 - How to make a FlatList scrollable inside of a ScrollView in react native?
This is what I have so far:
export const SignUpMember = ({navigation}) => {
const renderHeader = formikProps => {
return (
<>
<FormField
keyboardType={'default'}
fieldName={'firstName'}
label={'First Name'}
/>
<FormField
keyboardType={'default'}
fieldName={'lastName'}
label={'Last Name'}
/>
<FormField
onChangeText={text => {
formikProps.values.clubName = text;
searchItems(text);
}}
value={formikProps.values.clubName}
keyboardType={'default'}
fieldName={'clubName'}
label={'Club Name'}
placeholder={'Search Club By Name...'}
/>
</>
);
};
const renderFooter = formikProps => {
return (
<>
<FormField
keyboardType={'phone-pad'}
fieldName={'telephone'}
label={'Telephone'}
/>
<FormField
keyboardType={'email-address'}
fieldName={'email'}
label={'Email'}
/>
<FormField
keyboardType="default"
secureTextEntry={true}
fieldName={'password'}
label={'Password'}
type={'password'}
/>
<FormField
keyboardType="default"
secureTextEntry={true}
fieldName={'passwordConfirmation'}
label={'Confirm Password'}
type={'password'}
/>
<Button
mt="2"
bg="brand.blue"
type="submit"
onPress={formikProps.handleSubmit}>
Sign Up
</Button>
</>
);
};
return (
<KeyboardAvoidingView
keyboardVerticalOffset={headerHeight}
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
<ScrollView
_contentContainerStyle={styles.container}
nestedScrollEnabled={true}>
<Box p="1" py="8" w="90%" maxW="290">
<VStack space={3} mt="5">
<Formik
initialValues={initialFormValues}
onSubmit={values => handleFormSubmit(values)}
validationSchema={userValidationSchema}>
{formikProps => (
<View>
<FlatList
nestedScrollEnabled={true}
data={flatListData}
renderItem={({item}) => (
<Pressable
onPress={() => {
formikProps.values.clubName = item.name;
setFlatListData([]);
}}>
<Text style={styles.flatList}>{item.name}</Text>
</Pressable>
)}
keyExtractor={item => item.name}
ListHeaderComponent={renderHeader(formikProps)}
ListFooterComponent={renderFooter(formikProps)}
/>
</View>
)}
</Formik>
</VStack>
</Box>
</ScrollView>
</KeyboardAvoidingView>
);
};
export default SignUpMember;
How can I piece this together?

Get warning after update react : VirtualizedLists should never be nested inside plain ScrollViews with the same orientation

i'm working on a react native app and i updated my react version.
I use Flatlist inside a ScrollView.
I got this warning :
VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.
My component :
return (
<KeyboardAvoidingView behavior="padding" enabled style={styles.keyboardAvoidingView}>
<SafeAreaView style={styles.keyboardAvoidingView}>
<Header
..
}}
containerStyle={styles.headerContainer}
rightComponent={{
...
}}
/>
<ScrollView style={styles.body}>
<View style={styles.titleSection}>
<Text style={styles.stepTitle}>Étape 1/3</Text>
<Text style={styles.questionTitle}>Quel contact voulez-vous partager ?</Text>
</View>
<View>
<FlatList
data={contacts}
renderItem={({ item, index }) => (
<TouchableHighlight onPress={() => this.onItemClickHandler(index, item.id, item.firstName, item.lastName)} style={styles.touchableHighlight}>
<View>
<ListItem
chevron={
(
<Icon
color={this.state.selectedIndex === index
? `${defaultTheme.palette.white.main}`
: `${defaultTheme.palette.primary.dark}`}
name="chevron-right"
size={40}
type="material"
/>
)
}
containerStyle={
this.state.selectedIndex === index
? styles.selected
: styles.notSelected
}
leftElement={
(
<Icon
...
/>
)
}
title={`${item.firstName} ${item.lastName}`}
titleStyle={this.state.selectedIndex === index
? [styles.titleStyle, styles.titleSelected]
: [styles.titleStyle, styles.defaultTitle]}
/>
</View>
</TouchableHighlight>
)}
extraData={this.state.selectedIndex}
keyExtractor={(item) => item.email}
ListHeaderComponent={this.renderHeader(searchValue)}
style={styles.flatListStyle}
ListFooterComponent={this.renderFooter}
/>
{
(contacts.length > 0 && page > 0)
&& <CustomButton title="Afficher la suite" onPress={() => this.makeRemoteRequest()} loading={loading} disabled={loading} />
}
</View>
</ScrollView>
</SafeAreaView>
</KeyboardAvoidingView>
);
I had the same issue. See my code
What I did is the component which I wanted to render outside the flatlist I included that inside the ListHeaderComponent and removed the Scrollview component. Now its working fine without any warning.
Below is the previous code:
<ScrollView >
<ReadCard data={this.state.data}/>
<FlatList
data={this.state.data.related}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
ItemSeparatorComponent={ListSeprator}
/>
</ScrollView>
Below is the changed code without any warning:
<FlatList
data={this.state.data.related}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
ItemSeparatorComponent={ListSeprator}
ListHeaderComponent={
<ReadCard data={this.state.data}/>
}
/>

React Native - Change other icons color on click

I've been searching for a few days to solve this problem. I need to change another icon's color when i click in one of them.
I'm using react-native-vector-icons
this.setState({
listaPlantel: Object.entries(dataArray).map(function ([key, nome]) {
if (that.state.mercado.status_mercado == 2) {
dadosAtleta = that.state.pontuados[nome.atleta_id];
}
return (
<ListItem avatar key={key} button onPress={() => that.detailsScreen(nome)}>
<Left>
<Thumbnail source={{ uri: nome.foto.replace('FORMATO', '80x80') }} />
</Left>
<Body>
<Text>{nome.apelido}</Text>
<Text note>{that.state.posicoes ? that.state.posicoes[nome.posicao_id]['nome'] : ''} - {that.state.clubes ? that.state.clubes[nome.clube_id]['nome'] : ''}</Text>
<Text style={{ textAlign: 'left' }}>Última: {nome.pontos_num} Média: {nome.media_num} {' $' + nome.preco_num}</Text>
</Body>
<Right>
{/*<Text>{dadosAtleta ? dadosAtleta['pontuacao'] : nome.pontos_num}</Text>*/}
<Icon name="md-close-circle" size={30} />
<Icon type="Foundation" name="md-contact" key={key} size={30} color={that.state.id_capitao === nome.atleta_id ? that.state.corCap : that.state.corGeral} onPress={() => that.setState({ id_capitao: nome.atleta_id })} />
</Right>
</ListItem>
)
}),
});
It seems you are putting conditions and functions within setState I would recommend you read about the lifecycle and app state here:
https://reactjs.org/docs/state-and-lifecycle.html
As an example of how to update values, of which you're trying to do - take this scenario into consideration:
initial colour : red, updated colour : blue (For example)
in your constructor:
constructor (props) {
super(props);
this.state = {
/*Initial State and Colour*/
iconColour : "red"
}
}
in your render method:
<ListItem avatar key={key} button onPress={() => that.detailsScreen(nome)}>
<Icon color={this.state.iconColour}/>
</ListItem>
Within your onPress function:
this.setState({
iconColor : "blue"
})

Segmented control tab with multiple list view overlapping data

I am working on a react native application in which I have used Segmented control tab which works for both Android and iOS. I am using this github component for segmented tabs https://www.npmjs.com/package/react-native-segmented-control-tab
Here is my code sample :-
<View>
<SegmentedControlTab
values={['Tab 1', 'Tab 2']}
selectedIndex={this.state.selectedIndex}
onTabPress={this.handleIndexChange}
/>
<SearchBox
placeholder={this.state.selectedIndex === 0 ? 'Tab 1' : 'Tab 2'}
onFilterChange={this.onFilterChange}
filterPress={this.filterPress}
/>
{ this.state.selectedIndex === 0 ?
<ListView
style={styles.list}
dataSource={this.state.dataSource}
renderRow={user => (
<UserListRow
{...{ user }}
/>)}
refreshControl={
<RefreshControl
refreshing={false}
onRefresh={() => this._onRefresh()}
/>
}
onEndReached={() => this._onEndReached()}
onEndReachedThreshold={10}
enableEmptySections={true}
/>
:
<ListView
style={styles.list}
dataSource={this.state.dataSourceJobs}
renderRow={job => (
<JobListRow
{...{ job }}
/>
)}
refreshControl={
<RefreshControl
refreshing={false}
onRefresh={() => this._onRefresh()}
/>
}
onEndReached={() => this._onEndReached()}
onEndReachedThreshold={10}
enableEmptySections={true}
/>
}
</View>
Everything is working as I expected till the time I am not scrolling the Tab 1 OR Tab 2. Data gets overlap while scrolling down for pagination. e.g Data inside Tab 1 moves to Tab 2 and vice versa.
I am using below code for updating dataSource of list view.
componentWillReceiveProps({ data }) {
this.updateDataSource(data.tab1);
this.updateDataSourceJobs(data.tab2);
}
Here are some other usefult methods:-
updateDataSource(users) {
this._data = _.uniqBy(this._data.concat(users.toJS()), 'id');
this.setState({
dataSource: this.state.dataSource.cloneWithRows(
this._data
)
});
}
updateDataSourceJobs(jobs) {
this._jobData = _.uniqBy(this._jobData.concat(jobs.toJS()), 'id');
this.setState({
dataSourceJobs: this.state.dataSourceJobs.cloneWithRows(
this._jobData
),
});
}
I am not able to understand the issue is with Segmented control tab or with list view.
Also, If I am scrolling Tab 1 the other tab also gets scrolled.
Any help would be appreciated!