Related
I am using horizontal ScrollView to show few items on screen, this scroll view has pagination enabled and I am able to show pagination on the screen as well.
Below is my code:
const SwipeScreen = () => {
const { width, height } = Dimensions.get('window');
const [sliderState, setSliderState] = useState({ currentPage: 0 });
const setSliderPage = (event) => {
const { currentPage } = sliderState;
const { x } = event.nativeEvent.contentOffset;
const indexOfNextScreen = Math.floor(x / width);
if (indexOfNextScreen !== currentPage) {
setSliderState({
...sliderState,
currentPage: indexOfNextScreen,
});
}
};
const { currentPage: pageIndex } = sliderState;
const scrollViewRef = useRef(null);
const toNextPage = () => {
sliderState.currentPage += 1;
scrollViewRef.current?.scrollTo({
x: window.width * sliderState.currentPage,
animated: true,
});
};
return (
<>
<ScrollView
style={{ flex: 1 }}
ref={scrollViewRef}
horizontal={true}
scrollEventThrottle={16}
pagingEnabled={true}
showsHorizontalScrollIndicator={false}
onScroll={(event) => {
setSliderPage(event);
}}
>
<View style={{ width, height }}>
<Text>Item 1</Text>
<Button title='Next' color='#f194ff' onPress={toNextPage} />
</View>
<View style={{ width, height }}>
<Text>Item 2</Text>
<Button title='Next' color='#f194ff' onPress={toNextPage} />
</View>
<View style={{ width, height }}>
<Text>Item 3</Text>
<Button title='Next' color='#f194ff' onPress={toNextPage} />
</View>
<View style={{ width, height }}>
<Text>Item 4</Text>
<Button title='Next' color='#f194ff' onPress={toNextPage} />
</View>
<View style={{ width, height }}>
<Text>Item 5</Text>
</View>
</ScrollView>
<View style={styles.paginationWrapper}>
{Array.from(Array(5).keys()).map((key, index) => (
<View
style={[
styles.paginationDots,
{ opacity: pageIndex === index ? 1 : 0.2 },
]}
key={index}
/>
))}
</View>
</>
);
};
const styles = StyleSheet.create({
textColor: {
color: 'red',
},
paginationWrapper: {
position: 'absolute',
bottom: 200,
left: 0,
right: 0,
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
},
paginationDots: {
height: 10,
width: 10,
borderRadius: 10 / 2,
backgroundColor: '#0898A0',
marginLeft: 10,
},
});
export default WelcomeSwipeImgScreen;
I also wanted a next button, on whose click next item is shown on screen. For this I have written toNextPage function, but its not working. I am not able to figure out where I am going wrong with this
In my app you can join a group. There are storys and messages. If there is no story or messages modal is open fast. But If I have 30 text messages to render and want to click to open my modal then it takes 1-2 seconds or later to open. The same issue if I click a button. The opacity and function works until 1-2 seconds but if there is no much messages to render then it goes fast. I need help.
message render function
<FlatList
data={globalMessages}
style={{width: '100%'}}
contentContainerStyle={{marginLeft: 12}}
renderItem={({ item }) => (
<TouchableOpacity onLongPress={() => deleteMessage(item.id)} style={{width: 230, flexDirection: 'column', backgroundColor: '#eee', padding: 8, borderRadius: 12, margin: 12, marginLeft: 0, marginTop: 0}}>
<Text style={{fontFamily: 'poppins-light', fontSize: 16, color: '#333'}}>{item.message}</Text>
<Text style={{fontFamily: 'poppins-medium', fontSize: 12, color: '#333'}}>{item.date}</Text>
</TouchableOpacity>
)}
keyExtractor={item => item.id.toString()}
// ListHeaderComponent={() => this.renderHeader()}
horizontal={false}
nestedScrollEnabled
showsHorizontalScrollIndicator={false}
// Performance settings
removeClippedSubviews={true} // Unmount components when outside of window
initialNumToRender={2} // Reduce initial render amount
maxToRenderPerBatch={1} // Reduce number in each render batch
updateCellsBatchingPeriod={100} // Increase time between renders
windowSize={4} // Reduce the window size
/>
fullCode:
import { StatusBar } from 'expo-status-bar';
import React, { useState, useEffect, useRef } from 'react';
import { StyleSheet, Text, TextInput, View, TouchableOpacity, Image, Dimensions, ImageBackground, ActivityIndicator, ScrollView, FlatList, TouchableWithoutFeedback } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import { AntDesign, Ionicons } from '#expo/vector-icons';
import Modal from 'react-native-modal';
import * as ImagePicker from 'expo-image-picker';
import uploadStoryAPI from '../api/uploadStory';
import createMessageAPI from '../api/createMessage';
import io from 'socket.io-client/dist/socket.io';
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
const Room = ({ route }) => {
const socket = io('http://192.168.0.249:3000', {
transports: ['websocket']
});
const [connected, setConnected] = useState(false);
const [areaHeight, setAreaHeight] = useState(0);
const [chatMessage, setChatMessage] = useState('');
const [globalMessages, setGlobalMessages] = useState(route.params.messages || []);
const [loadSendChatMessage, setLoadSendChatMessage] = useState(false);
const [alignItem, setAlignItem] = useState('center');
const [addStory, setAddStory] = useState(false);
const [storys, setStorys] = useState(route.params.storys || []);
const [modalImagePreview, setModalImagePreview] = useState(false);
const [modalDeleteMessage, setModalDeleteMessage] = useState(false);
const [imagePreview, setImagePreview] = useState('');
const [loadUpload, setLoadUpload] = useState(false);
const [sourceStory, setSourceStory] = useState({
uri: null,
type: null,
name: null
});
useEffect(() => {
socket.on('connect', () => {
setConnected(true);
console.log('user connected');
});
socket.on('getmessage', message => {
globalMessages.length > 0 ?
setGlobalMessages(prevState => {
return [...prevState, message]
}) : setGlobalMessages([message]);
handleAddMessage();
});
});
const handleAlign = () => {
areaHeight > 100 ? setAlignItem('flex-end') : setAlignItem('center');
}
const handleAddStory = async () => {
try {
let result = await ImagePicker.launchImageLibraryAsync({
allowsEditing: true,
aspect: [1, 1]
});
setAddStory(false);
if(result.cancelled) {
setAddStory(false);
return;
}
let localUri = result.uri;
let filename = localUri.split('/').pop();
// Infer the type of the image
let match = /\.(\w+)$/.exec(filename);
let type = match ? `image/${match[1]}` : `image`;
setImagePreview(localUri);
setSourceStory({
uri: localUri,
type,
filename
});
setModalImagePreview(true);
} catch(e) {
return;
}
};
const handleUploadToServer = async () => {
try {
setLoadUpload(true);
let res = await uploadStoryAPI(route.params.roomID, sourceStory);
res.upload && storys.length > 0
? setStorys(prevState => {
return [{
source: res.source
}, ...prevState]
}) : setStorys([{ source: res.source}]);
console.log(`D ${storys}`)
res.upload ? (setLoadUpload(false),setModalImagePreview(false)) : setLoadUpload(false);
} catch(e) {
return e;
}
};
const handleAddMessage = async () => {
try {
setLoadSendChatMessage(true);
const res = await createMessageAPI(route.params.roomID, chatMessage);
console.log(res);
//scrollViewRef.current.scrollToEnd({animated: true});
setLoadSendChatMessage(false);
} catch(e) {
console.log(e);
return e;
}
};
const deleteMessage = async id => {
try {
console.log(id);
} catch(e) {
return e;
}
};
return (
<KeyboardAwareScrollView keyboardShouldPersistTaps="handled" style={{margin: 0, padding: 0}}>
<View style={{height: height - 155, backgroundColor: '#fff'}}>
<View>
<ScrollView>
<Text style={styles.title}>Storys</Text>
{
storys.length > 0
?
<FlatList
data={storys}
contentContainerStyle={{marginLeft: 8}}
renderItem={({ item }) => (
<TouchableOpacity key={`index-${item.source}`} style={{padding: 0, marginRight: 16, borderWidth: 2, justifyContent: 'center', alignItems: 'center', borderRadius: 100, borderColor: '#1ab7ff', height: 68, width: 68}}>
<Image resizeMode="contain" source={{uri: `http://192.168.0.249:3000/build/${item.source}`}} style={{height: 55, width: 55, borderRadius: 500}} />
</TouchableOpacity>
)}
keyExtractor={item => item.source.toString()}
// ListHeaderComponent={() => this.renderHeader()}
nestedScrollEnabled
horizontal
showsHorizontalScrollIndicator={false}
// Performance settings
removeClippedSubviews={true} // Unmount components when outside of window
initialNumToRender={2} // Reduce initial render amount
maxToRenderPerBatch={1} // Reduce number in each render batch
updateCellsBatchingPeriod={100} // Increase time between renders
windowSize={7} // Reduce the window size
/>
:
<Text>Es sind zurzeit keine Storys vorhanden.</Text>
}
<Text style={styles.title}>Nachrichten</Text>
{
globalMessages.length > 0
?
<FlatList
data={globalMessages}
style={{width: '100%'}}
contentContainerStyle={{marginLeft: 12}}
renderItem={({ item }) => (
<TouchableOpacity onLongPress={() => deleteMessage(item.id)} style={{width: 230, flexDirection: 'column', backgroundColor: '#eee', padding: 8, borderRadius: 12, margin: 12, marginLeft: 0, marginTop: 0}}>
<Text style={{fontFamily: 'poppins-light', fontSize: 16, color: '#333'}}>{item.message}</Text>
<Text style={{fontFamily: 'poppins-medium', fontSize: 12, color: '#333'}}>{item.date}</Text>
</TouchableOpacity>
)}
keyExtractor={item => item.id.toString()}
// ListHeaderComponent={() => this.renderHeader()}
horizontal={false}
nestedScrollEnabled
showsHorizontalScrollIndicator={false}
// Performance settings
removeClippedSubviews={true} // Unmount components when outside of window
initialNumToRender={2} // Reduce initial render amount
maxToRenderPerBatch={1} // Reduce number in each render batch
updateCellsBatchingPeriod={100} // Increase time between renders
windowSize={4} // Reduce the window size
/>
: null
}
</ScrollView>
</View>
</View>
<View style={{flex: 1, paddingLeft: 16, paddingTop: 8, paddingRight: 16, paddingBottom: 12, backgroundColor: '#fff', alignItems: alignItem, justifyContent:'space-between', flexDirection: 'row'}}>
<TouchableOpacity onPress={() => setAddStory(true)}>
<AntDesign name="pluscircleo" size={32} color="#444" />
</TouchableOpacity>
<TextInput
onChangeText={e => setChatMessage(e)}
// onFocus={() => setAlignItem('flex-end')}
onEndEditing={() => handleAlign()}
value={chatMessage}
multiline={true}
style={[styles.input, {height: Math.max(50, areaHeight)}]}
onContentSizeChange={e => {
setAreaHeight(e.nativeEvent.contentSize.height);
}}
placeholder="Gebe eine Nachricht ein..." />
<TouchableOpacity onPress={() => chatMessage.length > 0 ? socket.emit('getmessage', {
chatMessage,
date: Date.now()
}) : null} style={{padding: 8, paddingRight: 10, borderRadius: 8, backgroundColor: '#1ab7ff'}}>
{ !loadSendChatMessage ? <Ionicons name="paper-plane-outline" size={28} color="#fff" /> : <ActivityIndicator style={{height: 20, width: 20}} color="#fff" />}
</TouchableOpacity>
</View>
{ /* Ask user if he wants to upload */}
<Modal
isVisible={modalImagePreview}
swipeDirection="down"
onSwipeComplete={() => setModalImagePreview(false)}
onBackButtonPress={() => setModalImagePreview(false)}
onBackdropPress={() => setModalImagePreview(false)}
backdropTransitionOutTiming={0}
// style={{margin: 0, padding: 0}}
>
<View style={{ backgroundColor: '#fff', borderRadius: 12, padding: 12}}>
<Text style={{fontFamily: 'poppins-light', color: '#333', fontSize: 18, textAlign: 'center', marginBottom: 10}}>Möchtest du diese Story hochladen?</Text>
{ <Image resizeMode="contain" style={{height: 250, borderRadius: 12}} source={{uri: imagePreview}} /> }
<View style={{flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center', marginTop: 20, marginBottom: 10}}>
<TouchableOpacity onPress={() => setModalImagePreview(false)}>
<Text style={{fontFamily: 'poppins-light', color: '#333', borderWidth: 1, borderColor: '#eee', padding: 10, paddingTop: 13, borderRadius: 8}}>Abbrechen</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => handleUploadToServer()} style={{backgroundColor: '#1ab7ff', padding: 10, paddingTop: 13, borderRadius: 8}}>
{ !loadUpload ? <Text style={{fontFamily: 'poppins-light', color: '#fff'}}>Story hinzufügen</Text> : <ActivityIndicator style={{height: 20, width: 20}} color="#fff" /> }
</TouchableOpacity>
</View>
</View>
</Modal>
{ /* Modal open Story */ }
<Modal
isVisible={addStory}
swipeDirection="down"
onSwipeComplete={() => setAddStory(false)}
onBackButtonPress={() => setAddStory(false)}
onBackdropPress={() => setAddStory(false)}
backdropTransitionOutTiming={0}
style={{margin: 0, padding: 0}}
>
<View style={{position: 'absolute', bottom: 0, backgroundColor: '#fff', width: '100%', justifyContent: 'center', alignItems: 'center', borderTopLeftRadius: 20, borderTopRightRadius: 20}}>
<TouchableOpacity onPress={() => handleAddStory()} style={{padding: 20, backgroundColor: '#1ab7ff', width: width, justifyContent: 'center', alignItems: 'center',borderTopLeftRadius: 20, borderTopRightRadius: 20}}>
<Text style={{color: '#fff', fontFamily: 'poppins-light'}}>Story hinzufügen</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => setAddStory(false)} style={{padding: 20}}>
<Text>Abbrechen</Text>
</TouchableOpacity>
</View>
</Modal>
</KeyboardAwareScrollView>
)
};
I just wonder how can I hide both Header and Footer at the same time and with the same animated value?
Becouse I think I cannot use the same animated value for the animate multiple components at the same time.
MY COMPONENT
<SafeAreaView style={{ flex: 1 }}>
<Animated.View
style={{
transform: [{ translateY }],
position: "absolute",
top: 0,
left: 0,
zIndex: 100,
width: "100%",
}}
>
<MainHeader logo="socialLogo" navigation={navigation} />
</Animated.View>
<Animated.FlatList
ref={ref}
onEndReachedThreshold={0.5}
contentContainerStyle={{ paddingTop: HEADER_HEIGHT }}
bounces={false}
onScroll={handleScroll}
nestedScrollEnabled={true}
ListHeaderComponent={<Stories data={data} app={app} />}
pinchGestureEnabled={false}
ListEmptyComponent={<FeedItemLazy />}
onMomentumScrollEnd={handleSnap}
scrollEventThrottle={16}
renderScrollComponent={(props) => <ScrollView {...props} />}
showsVerticalScrollIndicator={false}
maxToRenderPerBatch={10}
onEndReached={() => {
props.social.getFeeds.executeNext({ lastID: lastId });
}}
refreshControl={
<RefreshControl
refreshing={isRefreshing}
onRefresh={handleRefresh}
/>
}
data={data}
renderItem={({ item, index }) => (
<>
<FeedItem
data={item}
app={app}
navigation={navigation}
social={social}
/>
<Separator height={2} />
</>
)}
keyExtractor={(item) => item._id}
/>
{social.getFeeds.isExecuting && (
<LottieView
source={require("../../../../assets/animation/16337-banana-loader.json")}
loop
autoPlay
style={{ width: 50, height: 50 }}
/>
)}
<ModalSelector navigation={navigation} />
</SafeAreaView>
This is a Feeds component. Users feeds being listed in the Flatlist, and my goal is when user scrolls down make the MainHeader and Bottom tabs collapsable. I think hardest part is to make bottom tabs unvisible, becose they are coming directly from react-navigation v5. from createBottomTabNavigator. I dont know how can I transfer the translateY value to tab navigator.
import React from 'react';
import {
Animated,
Easing,
Button,
View,
StyleSheet,
Text,
TouchableOpacity,
} from 'react-native';
const App = () => {
const animatedValue = React.useRef(new Animated.Value(0)).current;
const [hidden, setHidden] = React.useState(false);
const startAnimation = (toValue) => {
Animated.timing(animatedValue, {
toValue: hidden ? 0 : 1,
duration: 700,
easing: Easing.linear,
useNativeDriver: true,
}).start(() => setHidden(!hidden));
};
const translateY = animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [0, -50],
extrapolate: 'clamp',
});
return (
<View style={{ flex: 1 }}>
<Animated.View
style={[styles.item, { top: 0, transform: [{ translateY }] }]}
/>
<TouchableOpacity
style={styles.button}
onPress={startAnimation.bind(null, 1 - animatedValue.__value)}>
<Text>Hide</Text>
</TouchableOpacity>
<Animated.View
style={[
styles.item,
{
bottom: 0,
transform: [{ translateY: Animated.multiply(translateY, -1) }],
},
]}
/>
</View>
);
};
const styles = StyleSheet.create({
item: {
width: '100%',
height: 50,
position: 'absolute',
backgroundColor: 'red',
},
button: {
width: '50%',
height: 50,
backgroundColor: 'pink',
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center',
borderRadius: 25,
position: 'absolute',
top: 200,
},
});
export default App;
Live Demo.
I'm trying to achieve when I scroll bigger image, green border on smaller ones will go to the next one. I have 2 different flatlist for this. Tried to write item.key to state with onMomentumScrollEnd but didnt work. Here is my
<FlatList
data={this.state.productImage}
horizontal
pagingEnabled
showsHorizontalScrollIndicator={false}
onMomentumScrollEnd={item => { this.setState({ active: item.key });
console.log(item.key) }}
renderItem={({ item }) =>
<View>
<Image source={item.source} style={{ width:
Dimensions.get('window').width, height:
Dimensions.get('window').height / 2 }} />
</View>}
keyExtractor={item => item.key}
/>
<FlatList
data={this.state.productImage}
horizontal
showsHorizontalScrollIndicator={false}
contentContainerStyle={{ flexDirection: "row", alignItems: "center",
marginHorizontal: theme.SIZE.pageMargin, marginVertical: 20 }}
renderItem={({ item }) =>
<TouchableOpacity >
<Image source={item.source} style={[this.state.active === item.key
&& styles.activeImage, styles.productImages]} />
</TouchableOpacity>}
keyExtractor={item => item.key}
/>
Edit: After fighting with this I've solved
onMomentumScrollEnd={(event) => {
let xPosition = Math.round(event.nativeEvent.contentOffset.x)
let imageWidth = Math.round(Dimensions.get('window').width)
let keyOfShownImg = (Math.round((xPosition + imageWidth) / imageWidth))
this.setState({ active: keyOfShownImg })
}}
Actually you nearly got the solution. Here you can use onViewableItemChanged prop to achieve this.
I tried out the solution. Take a look here
import * as React from 'react';
import { Text, View, StyleSheet, FlatList, Image } from 'react-native';
import Constants from 'expo-constants';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
visibleIndex: 0,
data: [
'https://homepages.cae.wisc.edu/~ece533/images/airplane.png',
'https://homepages.cae.wisc.edu/~ece533/images/arctichare.png',
'https://homepages.cae.wisc.edu/~ece533/images/arctichare.png',
'https://homepages.cae.wisc.edu/~ece533/images/arctichare.png',
],
};
this.onViewableItemsChanged = this.onViewableItemsChanged.bind(this);
}
renderBigList = ({ item, index }) => {
return (
<Image
style={{ width: 300, height: 300, resizeMode: 'contain' }}
source={{ uri: item }}
/>
);
};
renderSmallList = ({ item, index }) => {
return (
<View
style={{
borderColor:
index === this.state.visibleIndex ? 'green' : 'transparent',
borderRadius: 10,
borderWidth: 2,
margin: 3,
}}>
<Image
style={{ width: 100, height: 100, resizeMode: 'contain' }}
source={{ uri: item }}
/>
</View>
);
};
onViewableItemsChanged = (viewableItemData, changed) => {
//console.log(viewableItemData);
if (viewableItemData.viewableItems.length) {
let keyOfVisibleItem = viewableItemData.viewableItems[0].index;
console.log(keyOfVisibleItem);
this.smallListRef.scrollToIndex({
index: keyOfVisibleItem,
animated: true,
});
this.setState({ visibleIndex: keyOfVisibleItem });
}
};
render() {
return (
<View style={styles.container}>
<FlatList
keyExtractor={(item, index) => '' + index}
style={{ height: '50%' }}
data={this.state.data}
extraData={this.state}
renderItem={this.renderBigList}
horizontal={true}
onViewableItemsChanged={this.onViewableItemsChanged}
viewabilityConfig={{
itemVisiblePercentThreshold: 90,
}}
showsHorizontalScrollIndicator={false}
/>
<FlatList
ref={ref => (this.smallListRef = ref)}
keyExtractor={(item, index) => '' + item}
style={{ height: 50 }}
data={this.state.data}
extraData={this.state}
renderItem={this.renderSmallList}
horizontal={true}
showsHorizontalScrollIndicator={false}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: Constants.statusBarHeight,
padding: 8,
backgroundColor: 'white',
},
});
In my react-native application, I want to set the height of an image as the flex height. How can I do that? At present, Im using the height as the device-heigth / 3. But when it comes to the smaller screens, it makes issues. How can I achieve this as the height of the image as the flex height? My code works properly in 5 inch devices, but when it comes to 4, the image makes a mess.
render() {
return (
<View style={styles.container}>
<View style={styles.postCommentWrapper}>
<ScrollView
ref={view => {
this.scrollView = view;
}}
>
<Animated.View>
<PostProfileBar
profile={this.state.post.author}
timeAgo={this.state.post.timeAgo}
/>
<ClickableImage
source={{ uri: this.state.post.postImage }}
height={height * (3 / 10)}
width={width}
onPress={() => alert("Image Clicked")}
/>
</Animated.View>
<CommentFlatList
data={this.state.data}
refreshing={this.state.refreshing}
/>
</ScrollView>
</View>
<View
style={[
styles.commentInputWrapper,
{ flex: this.state.commentBoxStyles.flex }
]}
>
<InputWithClickableIcon
iconName="upload"
placeholder="Type Comment"
isFocused={true}
fontSize={this.state.comment.value.length > 0 ? 16 : 20}
value={this.state.comment.value}
multiline={true}
maxLength={500}
height={this.state.commentBoxStyles.height}
borderRadius={this.state.commentBoxStyles.borderRadius}
onChangeText={value => this.onChangeComment(value)}
onPress={() => this.uploadComment()}
invalidInput={styles.invalidInput}
valid={this.state.comment.valid}
touched={this.state.comment.touched}
disabled={!this.state.comment.valid}
/>
</View>
</View>
);
}
static navigationOptions = ({ navigation }) => {
const { params = {} } = navigation.state;
return {
headerTitle: "Comment",
headerTitleStyle: {
paddingLeft: "20%",
paddingRight: "20%"
},
headerStyle: {
paddingRight: 10,
paddingLeft: 10
},
headerLeft: (
<Icon
name={"close"}
size={30}
onChangeText={this.onChangeText}
onPress={() => {
navigation.goBack();
}}
/>
)
};
};
}
const styles = StyleSheet.create({
container: {
borderWidth: 3,
borderColor: "yellow",
flex: 1
},
postCommentWrapper: {
borderWidth: 2,
borderColor: "blue",
flex: 16,
marginTop: 10
},
// commentListWrapper: {
// borderWidth: 2,
// borderColor: "green",
// flex: 8,
// marginTop: 10
// },
commentInputWrapper: {
flex: 2,
borderWidth: 2,
borderColor: "purple",
justifyContent: "flex-end",
marginTop: 5
}
});
ClickableImage Component
import React from "react";
import { TouchableOpacity, Image, StyleSheet } from "react-native";
const clickableImage = props => (
<TouchableOpacity onPress={props.onPress}>
<Image
{...props}
style={[
styles.image,
props.style,
{ height: props.height },
{ width: props.width }
]}
/>
</TouchableOpacity>
);
const styles = StyleSheet.create({
image: {
marginTop: 10,
flexDirection: "row",
alignItems: "center"
}
});
export default clickableImage;
Since you've already passed the style props to the ClickableImage, therefore you can do
<ClickableImage
source={{ uri: this.state.post.postImage }}
style={{flex: 1}}
onPress={() => alert("Image Clicked")}
/>
You also need to pass the styles to TouchableOpacity for the flex inside the container to work
<TouchableOpacity style={props.style} onPress={props.onPress}> //... Pass the relevant styles here