I'm having an issue using React Native with React Navigator where I'm not seeing a navigation menu at all. I'm using the following code:
App.js:
import "react-native-gesture-handler";
import React from "react";
import { StyleSheet, View } from "react-native";
import { QUATERNARY_COLOR } from "./env.json";
import Header from "./components/header";
import Routes from "./components/routes";
const App = () => {
return (
<View style={styles.home}>
<Header />
<Routes style={styles.routes} />
</View>
);
};
const styles = StyleSheet.create({
home: {
flex: 1,
backgroundColor: QUATERNARY_COLOR,
alignItems: "center",
paddingTop: 60,
},
});
export default App;
Header.js:
import React from "react";
import { StyleSheet, Text, View, Dimensions } from "react-native";
import { APP_NAME, PRIMARY_COLOR, QUATERNARY_COLOR } from "../env.json";
var width = Dimensions.get("window").width;
const Header = () => {
return (
<View style={styles.header}>
<Text style={styles.text}>{APP_NAME}</Text>
</View>
);
};
const styles = StyleSheet.create({
header: {
height: 48,
padding: 8,
paddingRight: 12,
paddingLeft: 12,
backgroundColor: PRIMARY_COLOR,
position: "absolute",
top: 24,
width: width,
alignSelf: "stretch",
textAlign: "center",
},
text: {
color: QUATERNARY_COLOR,
fontSize: 23,
fontWeight: "bold",
textAlign: "center",
},
});
export default Header;
Routes.js:
import React from "react";
import { Text, View } from "react-native";
import { NavigationContainer } from "#react-navigation/native";
import { createStackNavigator } from "#react-navigation/stack";
import Home from "../pages/home";
import Login from "../pages/login";
const Stack = createStackNavigator();
const Routes = () => {
return (
<React.Fragment>
<NavigationContainer>
<Stack.Navigator style={{ flex: 1 }}>
<Stack.Screen
name="Home"
component={Home}
options={{ title: "Home" }}
/>
<Stack.Screen name="Login" component={Login} />
</Stack.Navigator>
</NavigationContainer>
<Text>Hello World</Text>
</React.Fragment>
);
};
export default Routes;
Home.js:
import "react-native-gesture-handler";
import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View, Image } from "react-native";
import { APP_NAME, APP_VERSION, ENVIRONMENT, PRIMARY_COLOR } from "../env.json";
const Home = () => {
return (
<View style={styles.home}>
<Image
source={require("../assets/android-chrome-192x192-transparent.png")}
style={styles.logo}
/>
<Text h1 style={styles.title}>
{APP_NAME}
</Text>
{ENVIRONMENT !== "Production" ? (
<>
<Text h5 style={styles.version}>
Version {APP_VERSION}
</Text>
<Text h6 style={styles.environment}>
Environment: {ENVIRONMENT}
</Text>
</>
) : (
""
)}
<StatusBar style="auto" />
</View>
);
};
const styles = StyleSheet.create({
title: {
color: PRIMARY_COLOR,
fontSize: 30,
fontWeight: "bold",
},
logo: {
width: 150,
height: 150,
tintColor: PRIMARY_COLOR,
},
version: {
color: PRIMARY_COLOR,
fontSize: 16,
},
environment: {
color: PRIMARY_COLOR,
fontSize: 12,
},
});
export default Home;
Login.js:
import "react-native-gesture-handler";
import { StatusBar } from "expo-status-bar";
import * as React from "react";
import { StyleSheet, TextInput, View, Button } from "react-native";
import { API_URL } from "../env.json";
const Login = () => {
const [text, onChangeUsername] = React.useState("");
const [password, onChangePassword] = React.useState("");
return (
<View style={styles.login}>
<Text h1>Login</Text>
<Text h2>Username</Text>
<TextInput
style={styles.input}
onChangeUsername={onChangeUsername}
placeholder="Username"
value={text}
/>
<Text h2>Password</Text>
<TextInput
style={styles.input}
onChangePassword={onChangePassword}
placeholder="Password"
value={password}
secureTextEntry={true}
/>
<Button title="Login" />
<StatusBar style="auto" />
</View>
);
};
const styles = StyleSheet.create({
login: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
},
input: {
height: 40,
margin: 12,
borderWidth: 1,
},
});
export default Login;
This is what I'm seeing on the Android emulator:
I'm looking to have a navigation menu available to the user and also to have the Home page be the default landing page for the application. How do I do this? What am I doing wrong?
Your Home component must have {flex: 1} on it's container. Specifically in your case you've got 'styles.home' but you don't have that value included in your stylesheet.
And remove the {flex: 1} from the navigator.
Related
I'm trying to navigate to my page "CameraPage.js" but I'm getting this error "undefined is not an object (evaluating 'navigation.navigate')". Can anybody see the problem? This ismy first question here so please tell me if I can be more specific.
Here's my App.js:
import { StyleSheet, Text, View, TouchableOpacity, Pressable } from 'react-native';
import React, {useEffect, useState} from "react";
import { FontAwesome } from '#expo/vector-icons';
import { useNavigation } from '#react-navigation/native';
export default function App({ navigation }) {
return (
<View style={styles.container}>
<View style={styles.buttonContainer}>
<TouchableOpacity onPress ={() => navigation.navigate('CameraFunction')}>
<FontAwesome name="camera" size={100} color="#FFB6C1" />
</TouchableOpacity>
<Pressable>
<FontAwesome name="photo" size={100} color="#FFB6C1" />
</Pressable>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFDBE9'
},
buttonContainer: {
backgroundColor: 'transparent',
justifyContent: 'space-between',
},
});
Here is my CameraPage.js file:
import {StyleSheet, Text, View, TouchableOpacity} from 'react-native';
import {Camera, CameraType} from 'expo-camera';
import {useEffect, useState} from "react";
export default function CameraPage() {
const [hasPermission, setHasPermission] = useState(null);
const [type, setType] = useState(CameraType.back);
useEffect(() => {
(async () => {
const {status} = await Camera.requestCameraPermissionsAsync();
setHasPermission(status === 'granted');
})();
}, []);
if (hasPermission === null) {
return <View/>;
}
if (hasPermission === false) {
return <Text>No access to camera</Text>;
}
return (
<View style={styles.container}>
<Camera style={styles.camera} type={type}>
<View style={styles.buttonContainer}>
<TouchableOpacity
style={styles.button}
onPress={() => {
setType(type === CameraType.back ? CameraType.front : CameraType.back);
}}>
<Text style={styles.text}> Flip </Text>
</TouchableOpacity>
</View>
</Camera>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
camera: {
flex: 1,
},
buttonContainer: {
flex: 1,
backgroundColor: 'transparent',
flexDirection: 'row',
margin: 20,
},
button: {
flex: 0.1,
alignSelf: 'flex-end',
alignItems: 'center',
},
text: {
fontSize: 18,
color: 'white',
},
});
Here is my navigation file:
import React from 'react';
import {createStackNavigator} from '#react-navigation/stack';
import {NavigationContainer} from '#react-navigation/native';
import CameraPage from "../Camera/CameraPage";
const Routes = createStackNavigator();
export default function Navigator() {
return (
<NavigationContainer>
<Routes.Navigator>
<Routes.Screen
name="CameraFunction"
component={CameraPage}
/>
</Routes.Navigator>
</NavigationContainer>
);
}
Your navigation container must be wrapped around the root of your application or otherwise the navigation object will not be passed to the components that you have defined as screens.
The following fixes your issue.
export default const App = () => {
return (
<NavigationContainer>
<Routes.Navigator>
<Routes.Screen name="Home" component={HomeScreen} />
<Routes.Screen
name="CameraFunction"
component={CameraPage}
/>
</Routes.Navigator>
</NavigationContainer>
);
}
Your HomeScreen contains the old code from App, but now you can access the navigation object since we have defined HomeScreen as a screen inside the navigator. It will be passed to that screen by the navigation framework. Notice as well that HomeScreen is the initial screen of your application.
export default function HomeScreen({ navigation }) {
return (
<View style={styles.container}>
<View style={styles.buttonContainer}>
<TouchableOpacity onPress ={() => navigation.navigate('CameraFunction')}>
<FontAwesome name="camera" size={100} color="#FFB6C1" />
</TouchableOpacity>
<Pressable>
<FontAwesome name="photo" size={100} color="#FFB6C1" />
</Pressable>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFDBE9'
},
buttonContainer: {
backgroundColor: 'transparent',
justifyContent: 'space-between',
},
});
Notice, that you need to navigate back to the HomeScreen once you have navigated to the CameraPage. You can use the navigation object in the CameraPage as well and trigger navigation.goBack to achieve this effect.
You just use #react-navigation/native-stack in place of #react-navigation/stack in App.js file then it will working perfect ,
import * as React from 'react';
import {NavigationContainer} from '#react-navigation/native';
import {createNativeStackNavigator} from '#react-navigation/native-stack';
import Home from './TopTabBar/Home';
import 'react-native-gesture-handler';
const Stack = createNativeStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
I will try to explain this as best I can, I'm still new and have a hard time understanding the terminology.
I am working on a react native project. I have created two files. One Header.js and one footer.js.
I have successfully pulled them in to my Home Screen. However the buttons, inside footer.js, no longer fires. I get; undefined is not an object (evaluating 'navigation.navigate') for the error.
How do I bring back the functionality?
Any help is very appreciated. Here is my project to help;
App.js
import React from 'react';
import TabNavigator from "./assets/component/TabNavigator";
import {StackNavigation} from "./assets/component/StackNavigation";
export default function App() {
return (
<StackNavigation/>
);
}
StackNavigation.js;
import React from 'react';
import { HomeScreen} from "../Screens/HomeScreen";
import LayoutProps from "../Screens/Layout Props";
import SampleViewProps from "../Screens/SampleViewProps";
import {NavigationContainer} from "#react-navigation/native";
import {createNativeStackNavigator} from "#react-navigation/native-stack";
// import ShareExample from "./assets/component/SBShare";
const Stack = createNativeStackNavigator();
export function StackNavigation() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen}/>
<Stack.Screen name="Layout Props" component={LayoutProps} />
<Stack.Screen name="View Props" component={SampleViewProps} />
</Stack.Navigator>
</NavigationContainer>
);
}
HomeScreen.js;
import React from 'react';
import {Button, View, SafeAreaView, StyleSheet} from 'react-native';
import HeaderSB from "../component/SBHeader";
import FooterSB from "../component/SBFooter";
// import ShareExample from "./assets/component/SBShare";
export function HomeScreen({navigation}) {
const receiveValue = (value) => {
console.log("value received from B", value)
}
return (
<>
<SafeAreaView style={styles.container}>
<View style={styles.headerContainer}>
<HeaderSB receiveValue={receiveValue}>
</HeaderSB>
</View>
<View style={styles.mainContent}>
<View style={styles.buttonBox}>
<Button onPress={() => navigation.navigate('Layout Props')} title="Layout Props"/>
<Button onPress={() => navigation.navigate('View Props')} title="View Style Props"/>
</View>
</View>
<View styles={styles.footerContainer}>
<FooterSB receiveValue={receiveValue}>
</FooterSB>
</View>
</SafeAreaView>
</>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "space-between",
},
headerContainer: {
},
mainContent: {
},
buttonBox: {}
,
footerContainer: {
},
});
Footer.js;
import * as React from "react";
import {StyleSheet, TouchableOpacity, View} from "react-native";
import {AntDesign, Feather} from "#expo/vector-icons";
import {StackNavigation} from "./StackNavigation";
const FooterSB = ({navigation}) => {
return (
<>
{/* Bottom App Navigation */}
<View style={footerStyle.navCon}>
<View style={footerStyle.navBar}>
{/* Home Button */}
<TouchableOpacity style={footerStyle.home} onPress={() =>
navigation.navigate('Home')}
>
{/* Icon */}
<AntDesign name="home" size={50} color="white"/>
</TouchableOpacity>
{/* Navigation Divider */}
<View style={footerStyle.navDivider}/>
{/* Setting Button */}
<TouchableOpacity style={footerStyle.settings} onPress={() =>
navigation.navigate('Layout Props')}
>
{/* Icon */}
<Feather name="settings" size={50} color="white"/>
</TouchableOpacity>
</View>
</View>
</>
);
}
const footerStyle = StyleSheet.create({
navCon: {
flex: 1,
marginTop: 20,
alignItems: "center",
justifyContent: "flex-end"
},
navBar: {
flexDirection: "row",
justifyContent: "space-evenly",
alignItems: "center",
backgroundColor: "#808080",
width: 500,
height: 50,
},
home: {
// paddingHorizontal: 55,
},
navDivider: {
backgroundColor: "#FFF",
width: 4,
height: 50,
},
settings: {
// marginRight: 107,
// paddingHorizontal: 55,
},
});
export default FooterSB;
If you want navigation as default prop you should add it as <Stack.Screen> but as FooterSB is custom and individual component it doesn't get wrapped with navigation prop automatically.
You need to pass navigation as prop to that so change below
<FooterSB receiveValue={receiveValue}>
</FooterSB>
to
<FooterSB receiveValue={receiveValue} navigation={navigation}>
</FooterSB>
Same way you can pass navigation to header too.
I'm having a problem getting my React Navigation to actually transition screens. I've used it successfully before and I cannot figure out what my problem is this time. I click my button and no transition happens. I think it might be a problem with the inline onPress not running....does it have to be in Main Button? Or does the inline code on App.js override anything in MainButton.js.
Also...NarScreen is the screen I'm trying to get to.
FILE 1: App.js
import 'react-native-gesture-handler';
import React from 'react';
import { View, Text, StyleSheet, Image } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { color } from 'react-native-reanimated';
import MainButton from './components/MainButton';
import NarScreen from './screens/NarScreen.js'
function HomeScreen({ navigation }) {
return(
<View style={styles.background}>
<View style={styles.logo}>
<Image source={require('./components/HNS1.png')} style={styles.image} resizeMode='contain' />
</View>
<View style={styles.buttons}>
<MainButton onPress={() => navigation.navigate('Nar')}>NAR Test</MainButton>
<MainButton>Tripoli Test</MainButton>
</View>
</View>
);
}
function Nar({ navigation }) {
return(
<NarScreen />
)
}
const Stack = createStackNavigator();
function App() {
return(
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Nar" component={Nar} />
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
background: {
backgroundColor: '#00629B',
flex: 1,
},
buttons: {
marginTop: "20%",
marginLeft: 10,
},
image: {
width: '80%',
height: 300,
borderRadius: 20,
},
logo: {
borderRadius: 200,
marginTop: '30%',
alignItems: 'center'
},
});
export default App;
File 2: NarScreen.js
import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
const NarScreen = props => {
return(
<View>
<Text>BigScreen!</Text>
</View>
)
}
export default NarScreen;
FILE 3: MainButton.js
import React from 'react';
import {View, Text, StyleSheet, TouchableOpacity, } from 'react-native';
const MainButton = props => {
return <TouchableOpacity>
<View style={styles.button}>
<Text style={styles.buttonText}>{props.children}</Text>
</View>
</TouchableOpacity>
}
const styles = StyleSheet.create({
button: {
backgroundColor: "#FCD757",
paddingVertical: 30,
paddingHorizontal: 30,
height: 100,
width: 300,
marginTop: "10%",
borderRadius: 10,
marginLeft: '12%',
justifyContent: 'space-between',
},
buttonText: {
color: 'black',
fontSize: 26,
textAlign: 'center',
}
})
export default MainButton;
Inside your MainButton.js file, you are not handling onPress event. Add it to touchable opacity.
const MainButton = props => {
return <TouchableOpacity onPress={props.onPress}>
<View style={styles.button}>
<Text style={styles.buttonText}>{props.children}</Text>
</View>
</TouchableOpacity>
}
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity} from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator, createAppContainer } from '#react-navigation/stack';
import ShopMens from './ShopMens';
import ShopWomens from './ShopWomens';
const CategoryButton = () => {
return(
<View style={styles.buttonCont}>
<TouchableOpacity onPress={()=> this.props.navigation.navigate('ShopMens')}>
<Text style={styles.title}>SHOP MEN'S</Text>
</TouchableOpacity>
<TouchableOpacity onPress={()=> this.props.navigation.navigate('ShopWomens')} >
<Text style={styles.title}>SHOP WOMEN'S</Text>
</TouchableOpacity>
</View>
)
}
const styles = StyleSheet.create({
buttonCont: {
flexDirection:'row',
justifyContent: 'space-around',
width: '60%',
marginLeft: 10,
marginBottom: 10
},
title: {
fontWeight:'bold'
}
});
const RootStack = createStackNavigator(
{
CategoryButton: CategoryButton,
ShopMens: ShopMens,
ShopWomens: ShopWomens
},
{
initialRouteName: 'CategoryButton'
}
)
export default createAppContainer(RootStack);
React Native Experts. I need help with the navigation between pages.
I have a Home page with Bottom Navigation with Icon that works perfectly fine.
Then on the same I have 2 TouchableOpacity Button that I need to redirect to another page when I press on it.
I separated those 2 buttons on another component called Category Button, on that component I'm trying to do the Stack navigation to redirect the button to another page, but I have an error saying that stack has already been declared. I don't know how to fix this as I'm following the navigation doc on React Native, and I don't know if I'm doing this right. Can someone help?
UPDATE : I was using react-navigation v4 and v5. I now switch everything to react navigation v4 but my navigation between page ShopMens and ShopWomens is still not working, I don't think I did set my stack in the right way
import React from 'react';
import { StyleSheet, View} from 'react-native';
import Home from './components/Home';
export default function App() {
return (
<View style={styles.container}>
<Home />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
textAlign: "center"
},
header: {
color: "lightgreen",
textAlign: "center",
marginTop: 50,
fontSize: 50,
fontWeight: "bold",
}
});
import React from 'react';
import { StyleSheet, Text, View, Image,TouchableOpacity} from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
import { Icon } from 'react-native-elements';
import Profile from './Profile';
import Cart from './Cart';
import Favourite from './Favourite';
import CategoryButton from './CategoryButton';
const Home = () => {
return(
<View style={styles.container}>
<Text style={styles.header}>GOLDEN SHOE</Text>
<CategoryButton />
<Image style={styles.logo} source={{uri:'https://www.vooberlin.com/media/image/cb/d0/3d/JS36105A-13190-001-JIL-SANDER-LEATHER-LOAFERS-BLACK-2.jpg'}}/>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginTop: 2,
},
header: {
color: "lightgreen",
textAlign: "center",
marginTop: 50,
fontSize: 60,
fontWeight: "bold",
},
logo: {
width: 450,
height: 550,
},
});
const TabNavigator = createMaterialBottomTabNavigator(
{
Home: {
screen:Home,
navigationOptions: {
tabBarLabel: 'Home',
activeColor:'#000000',
inactiveColor: 'grey',
barStyle:{backgroundColor: 'white'},
tabBarIcon:() =>(
<View>
<Icon
name={'home'}
size={25}
style={{color:'#ff0000'}}
/>
</View>
)
}
},
Profile: {
screen:Profile,
navigationOptions: {
tabBarLabel: 'Profile',
activeColor:'#000000',
inactiveColor: 'grey',
barStyle:{backgroundColor: 'white'},
tabBarIcon:() =>(
<View>
<Icon
name={'person'}
size={25}
style={{color:'#ff0000'}}
/>
</View>
)
}
},
Favourite: {
screen:Favourite,
navigationOptions: {
tabBarLabel: 'Favourite',
activeColor:'#000000',
inactiveColor: 'grey',
barStyle:{backgroundColor: 'white'},
tabBarIcon:() =>(
<View>
<Icon
name={'favorite-border'}
size={25}
style={{color:'#ff0000'}}
/>
</View>
)
}
},
Cart: {
screen:Cart,
navigationOptions: {
tabBarLabel: 'Cart',
activeColor:'#000000',
inactiveColor: 'grey',
barStyle:{backgroundColor: 'white'},
tabBarIcon:() =>(
<View>
<Icon
name={'shopping-cart'}
size={25}
style={{color:'#ff0000'}}
/>
</View>
)
}
},
}
);
export default createAppContainer(TabNavigator);
I have created a list of posts and want to pass details of one specfic post to another screen. I want to be able to click on the post and be directed to the post details screen. This is the PostList.js file:
import React, {Component} from 'react';
import {
FlatList,
StyleSheet,
View,
Text,
Modal,
TouchableOpacity,
} from 'react-native';
import Post from './Post';
import Firebase from 'firebase';
import 'firebase/database';
import {firebaseConfig} from './configFirebase';
import PostDetails from './stack/PostDetails';
export default class Posts extends Component {
constructor(props) {
super(props);
!Firebase.apps.length
? Firebase.initializeApp(firebaseConfig.firebase)
: Firebase.app();
this.state = {
postList: [],
navigation: this.props.navigation,
};
}
state = {
loading: false,
currentPost: null,
};
componentDidMount() {
this.getPostData();
}
getPostData = () => {
const ref = Firebase.database().ref('/posts');
ref.on('value', snapshot => {
console.log('DATA RETRIEVED');
const postsObject = snapshot.val();
if (!postsObject) {
return console.warn('No data from firebase');
}
const postsArray = Object.values(postsObject);
this.setState({postList: postsArray});
});
};
render() {
return (
<View style={styles.container}>
<FlatList
keyExtractor={post => post.heading}
data={this.state.postList}
renderItem={({item: post}) => (
<Post
key={post.heading}
heading={post.heading}
description={post.description}
location={post.location}
onPress={() => this.props.navigation.push('PostDetails', {post})}
/>
)}
/>
</View>
);
}
}
export const styles = StyleSheet.create({
container: {
borderWidth: 2,
borderRadius: 5,
backgroundColor: '#2bb76e',
flex: 1,
},
txtInput: {
flex: 1,
margin: 5,
padding: 5,
borderWidth: 2,
fontSize: 20,
borderRadius: 5,
backgroundColor: 'snow',
},
});
I've tried navigation.navigate() and navigation.push() and neither work.
This is the PostDetails Screen I want to navigate to and pass the post info to:
import React from 'react';
import {Text, View} from 'react-native';
export default ({route}) => {
const postInfo = route.params.post;
return (
<View>
<Text>{JSON.stringify(postInfo, null, 2)}</Text>
<Text>{postInfo.heading}</Text>
</View>
);
};
This is my HomeStack file where the screens are kept:
import React from 'react';
import {NavigationContainer} from '#react-navigation/native';
import {createStackNavigator} from '#react-navigation/stack';
import Posts from '../PostList';
import AddForm from '../AddForm';
import PostDetails from './PostDetails';
const HomeStack = createStackNavigator();
const HomeStackScreen = () => (
<HomeStack.Navigator>
<HomeStack.Screen
name="PostList"
component={Posts}
options={{headerTitle: 'big APPetite'}}
/>
<HomeStack.Screen
name="PostDetails"
component={PostDetails}
options={({route}) => ({heading: route.params.post.heading})}
/>
<HomeStack.Screen name="NewPost" component={AddForm} />
</HomeStack.Navigator>
);
export default HomeStackScreen;
Post.js:
import React, {Component} from 'react';
import {
Image,
Text,
StyleSheet,
View,
TextInput,
FlatList,
TouchableOpacity,
} from 'react-native';
import FavouriteButton from './buttons/FavouriteButton';
import chickenClub from './images/chickenSandwich.jpg';
const Post = ({heading, description, location, username}) => (
<TouchableOpacity style={postStyle.container}>
<View style={(postStyle.container, {alignItems: 'flex-start'})}>
<View style={postStyle.padding}>
<Image style={postStyle.image} source={chickenClub} />
<View style={{backgroundColor: (255, 255, 255, 45), borderRadius: 6}}>
<Text style={postStyle.text}>{heading}</Text>
<Text style={postStyle.text}>{location}</Text>
<Text style={postStyle.text}>{username}*username*</Text>
</View>
</View>
<View
style={{
alignSelf: 'flex-end',
flexDirection: 'column',
backgroundColor: '#2bb76e',
}}>
<Text style={postStyle.paragraph}>{description}</Text>
<View style={{justifyContent: 'flex-start', alignItems: 'flex-end'}}>
<FavouriteButton />
</View>
</View>
</View>
</TouchableOpacity>
);
const postStyle = StyleSheet.create({
container: {
borderWidth: 2,
borderRadius: 5,
backgroundColor: '#2bb76e',
flex: 1,
},
padding: {
padding: 10,
},
heading: {
backgroundColor: (255, 250, 250, 50),
flexDirection: 'column',
},
paragraph: {
alignSelf: 'flex-end',
fontSize: 20,
},
username: {},
image: {
flexDirection: 'row',
height: 150,
width: 150,
},
text: {
fontSize: 25,
padding: 5,
},
});
export default Post;
You are passing onPress to your Post component, however you are not applying that prop to the TouchableOpacity.
Modifying the Post component to include:
const Post = ({heading, description, location, username, onPress}) => (
<TouchableOpacity style={postStyle.container} onPress={onPress}>