I want to display multiple FAB based on numColumns
Unable to render the FAB object inside the Flatlist
<View style={styles.search_field_container}>
<FlatList
data={formatData(this.state.users, numColumns)}
numColumns={numColumns}
keyExtractor={item => item.id}
renderItem={({item}) => this.renderitem(item)}
/>
renderitem = item => {
return (
<Container>
<Header />
<View style={{ flex: 1 }}>
<Fab
active={this.state.active}
direction="up"
containerStyle={{ }}
style={{ backgroundColor: '#5067FF' }}
position="bottomRight"
onPress={() => this.setState({ active: !this.state.active })}>
<Icon name="share" />
<Button style={{ backgroundColor: '#34A34F' }}>
<Icon name="logo-whatsapp" />
</Button>
<Button style={{ backgroundColor: '#3B5998' }}>
<Icon name="logo-facebook" />
</Button>
<Button disabled style={{ backgroundColor: '#DD5144' }}>
<Icon name="mail" />
</Button>
</Fab>
</View>
</Container>
);
};
}
Related
I have a view with 2 flatlist, one vertical is working perfectly while the horizontal one doesn't, I can see one card only and it won't move. I searched through the known issues and most of the times is a missing flex-1 but not here.
Any idea? Some Tailwind CSS in it, if it needs clarification please tell me. Thanks
const Home = () => {
const renderItem = useCallback(
({ item, onpress }) => <VideoListItem onpress={onpress} item={item} />,
[]
);
return (
<>
<SafeAreaView className="flex-1">
<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "height" : undefined}
keyboardVerticalOffset={100}
>
<View
className="flex flex-row mx-6 my-2 px-3 py-3 justify-between items-center "
style={styles.searchContainer}
>
<Image
className="rounded-full"
style={{ width: scale(30), height: scale(30) }}
source={require("../assets/mlucas.jpg")}
/>
<Ionicons
name="search-outline"
size={scale(25)}
color="px-2 bg-black border"
/>
</View>
</KeyboardAvoidingView>
<Text className="text-xl px-6 my-3"> Dernières vidéos</Text>
<View style={{ flex: 1 }} className="px-6 mb-3">
{data && (
<>
<FlatList
horizontal={true}
data={data}
renderItem={renderItem}
keyExtractor={(item) => item.title}
/>
</>
)}
</View>
<Text className="text-xl px-6 my-3"> Toutes nos vidéos</Text>
<View style={{ flex: 1 }} className="px-6">
{data && (
<FlatList
showsVerticalScrollIndicator={false}
data={data}
renderItem={renderItem}
keyExtractor={(item) => item.title}
/>
)}
</View>
</SafeAreaView>
</>
and simplified VideoItems
const VideoListItem = ({ item, onpress }) => {
return (
<Pressable className=' bg-gray-200 border my-2 rounded-2xl' onPress={openVideoPage} style={styles.videoCard}>
<View >
<Image style={styles.thumbnail} className="rounded-t-2xl" source={{ uri: item.url_image || "" }} />
</View>
<View style={styles.titleRow}>
<View style={styles.midleContainer}>
<Text className='text-black'style={styles.title}>{item.title}</Text>
<Text style={styles.subtitle}>
{item.User?.name || "No name"}
</Text>
</View>
</View>
</Pressable>
)
}
The listStyle where I set the height of my list it's not working on Autocomplete.
I'm using react-native-autocomplete-input.
Check the Example:
<HideKeyboard>
<SafeAreaView style={mainStyle.container}>
<StatusBar style="light" backgroundColor="#0a3f88" />
<SimpleLineIcons style={mainStyle.menuIconHome} name="menu" size={28} color="black" onPress={() => {Keyboard.dismiss(), navigation.openDrawer()}}/>
<Image style={mainStyle.logo} source={logo}></Image>
<Autocomplete
style={{
backgroundColor:"transparent",
textAlign:"center",
}}
onChangeText={(text) => searchFilterFunction(text)}
data={filteredDataSource}
placeholder="Nome da empresa..."
autoFocus={true}
listStyle={{
maxHeight:20,
}}
containerStyle={{
paddingHorizontal:40,
position:"absolute",
top:"45%",
alignSelf:"center",
}}
inputContainerStyle={{
height:40,
zIndex:999,
}}
flatListProps={{
keyExtractor: (item, index) => index.toString(),
renderItem: ({ item }) =>
<TouchableOpacity
onPress={()=>{
navigation.navigate("Projeto",{
item:item,
});
}}
>
<View style={{
height:50,
borderBottomWidth:0.4,
}}>
<Text style={{
color:"#0a3f88",
fontWeight:"bold",
marginLeft:10,
}}>{item}</Text>
</View>
</TouchableOpacity>
}}
/>
<Image style={mainStyle.cmlagos} source={camaraLagos}></Image>
</SafeAreaView>
</HideKeyboard>
As you can see in the prinscreen below , the listStyle have no effect.
Already tried to use ScrollView outside of the Autocomplete but it's the same.
Any suggestions ?
Solved!
Instead of use the listStyle, we can use style:{height: 150} inside of flatListProps.
I am tryin g to make the buttons login and register have top spacing from the logo above them but no css attributes work so far
I tried padding top/margin top and top but all don't work and margin left doesn't work also
here's the expo snack link:
https://snack.expo.io/#mai95/intelligent-tortillas
<Button title="Login" style={{top:300}} onPress={() => navigation.navigate("Details")} >
<Text style={styles.loginText}>LOG IN</Text>
</Button>
<Button title="Register"style={{top:300,marginLeft:50}} onPress={() => navigation.navigate("Details")} >
<Text style={styles.loginText2}>Register</Text>
</Button>
any idea what's wrong?
The styles prop is not available on the <Button /> component. You should consider wrapping the buttons in a div like so:
<View style={{ flexDirection: 'row', marginTop: 100 }}>
<View style={{ marginHorizontal: 25 }}>
<Button title="Login" onPress={() => navigation.navigate('Details')}>
<Text style={styles.loginText}>LOG IN</Text>
</Button>
</View>
<View style={{ marginHorizontal: 25 }}>
<Button
title="Register"
onPress={() => navigation.navigate('Details')}>
<Text style={styles.loginText2}>Register</Text>
</Button>
</View>
</View>
MarginTop should be in a container <View/>
Here is the snippet working with marginTop:
<View style={{flexDirection:'row', marginTop: 30}}>
<Button title="Login" onPress={() => navigation.navigate("Details")} >
<Text style={styles.loginText}>LOG IN</Text>
</Button>
<Button title="Register" onPress={() => navigation.navigate("Details")} >
<Text style={styles.loginText2}>Register</Text>
</Button>
</View>
I added a tabbar with ScrollableTabView. I want to navigate the tabbar I added. For example, I want the 'mainEkran' class to open in 1.tab. 2. I want to show the notification class when I click on the tab. How can I navigate with Tab?
import anaEkran from "../screens/anaEkran";
import notification from "../screens/notification";
export default class HomeScreen extends Component {
return (
<View style={styles.container}>
<ScrollableTabView renderTabBar={() => <MaskTabBar someProp={'here'} showMask={true} maskMode='light' />}>
<anaEkran navigation={this.props.navigation} tabLabel=".."/>
<notification navigation={this.props.navigation} tabLabel=".."/>
</ScrollableTabView>
<View style={{ marginRight: 10 ,marginTop:30}}>
<Image source={require('../images/HEADER.png')} style={{ width: screenWidth, height: 80 }}>
.... }
renderTabView = () => (
<Tabs
ref={(tabView) => this.tabView = tabView}
style={{ backgroundColor: 'transparent' }}
tabContainerStyle={{ elevation: 0, backgroundColor: 'transparent' }}
tabStyle={{ backgroundColor: 'transparent' }}
page={this.props.navigation.getParam('page')}
onChangeTab={this.onChangeTab.bind(this)}
>
<Tab
heading="Tab 1"
tabStyle={{ backgroundColor: 'transparent' }}
activeTabStyle={{ backgroundColor: 'transparent' }}
textStyle={styles.textStyle}
activeTextStyle={styles.textStyle}
active={this.props.navigation.state.index === 0}
>
<Tab1
{...this.props}
/>
</Tab>
<Tab
heading="Tab2"
tabStyle={{ backgroundColor: 'transparent' }}
activeTabStyle={{ backgroundColor: 'transparent' }}
textStyle={styles.textStyle}
activeTextStyle={styles.textStyle}
active={this.props.navigation.state.index === 1}
>
<Tab2
{...this.props}
/>
</Tab>
<Tab
heading="Tab 3"
tabStyle={{ backgroundColor: 'transparent' }}
activeTabStyle={{ backgroundColor: 'transparent' }}
textStyle={styles.textStyle}
activeTextStyle={styles.textStyle}
active={this.props.navigation.state.index === 2}
>
<Tab3
{...this.props}
/>
</Tab>
</Tabs>
);
render() {
return (
<Container>
<Header hasTabs style={styles.header}>
<Left style={styles.flex1}>
<TouchableOpacity
onPress={onLeftPress}
style={{ marginLeft: 16 }}
>
<Text style={styles.notificationTxt}>
{`Left`}
</Text>
</TouchableOpacity>
</Left>
<Body style={styles.headerBody}>
<GNImage
square
source={require('../../assets/images/LogoGroup_Header.png')}
style={styles.logo}
/>
</Body>
<Right style={styles.flex1}>
<TouchableOpacity
style={[styles.notification, { backgroundColor: '#F2F2F2' }]}
onPress={onPress}
>
<Text style={styles.notificationTxt}>
{`Done`}
</Text>
</TouchableOpacity>
</View>
</Right>
</Header>
{
this.renderTabView()
}
</Container>
);
}
Then you can call like this to change tab programatically.
openTab = (index) => {
NavigationService.navigate('Home', {
page: index
})
}
Home is the name of the class in which we have defined above TabView code.
I am trying to wrap the data present in a list and make the list swipeable using SwipeRow. But after I add the SwipeRow on top of my ListItem tag, the content is not displayed.
I have tried using renderItem but that seems unrelatable and doesn't work.
return(
// <SwipeRow style={{backgroundColor:'red'}}>
//body={
<View style={{backgroundColor: 'red'}}>
<ListItem style={{ width: '100%' }} onPress={() => this.navigationTo(this.props.data.h)}>
<View style={{ marginHorizontal: 15, alignSelf: 'flex-start' }}>
{this.props.data.iconType === 'Material' ? (
<MaterialIcon style={{}} size={24} name={this.props.data.i} color="#87898B" />
) : (
<MaterialCommunityIcons style={{}} size={24} name={this.props.data.i} color="#87898B" />
)}
</View>
<View>
<Text style={styles.heading}>{this.props.data.h}</Text>
<Text style={styles.description}>
{this.props.data.dp}{' '}
<B>
{count} {this.props.data.db}
</B>{' '}
{this.props.data.da}.
</Text>
<Text style={styles.metadata}>{this.props.data.m}</Text>
</View>
</ListItem>
</View>
// }
// </SwipeRow>
);
Probably try giving some styles to SwipeRow assuming you have imported the swipeRow
You can use renderRow in ListView
<ListView
style={{flex: 1, backgroundColor:'red'}}
dataSource={this.props.data}
renderRow={ data => (
<SwipeRow
leftOpenValue={75}
rightOpenValue={-75}
>
<View style={{ marginHorizontal: 15, alignSelf: 'flex-start' }}>
{this.props.data.iconType === 'Material' ? (
<MaterialIcon style={{}} size={24} name={data.i} color="#87898B" />
) : (
<MaterialCommunityIcons style={{}} size={24} name={data.i} color="#87898B" />
)}
</View>
<View>
<Text style={styles.heading}>{data.h}</Text>
<Text style={styles.description}>
{data.dp}{' '}
<B>
{count} {data.db}
</B>{' '}
{data.da}.
</Text>
<Text style={styles.metadata}>{data.m}</Text>
</View>
</SwipeRow>
)}
/>