I am running into an issue when trying to display the image. I'm not sure where to go from here. I am importing it correctly and this is a example of a tutorial that I am doing but the author images are displayed but mines are not. What could be the issue? I am following line by line from this tutorial.
ImageScreen.js
import React from "react";
import {View, Text, StyleSheet} from 'react-native';
import ImageDetail from './components/ImageDetail.js';
const ImageScreen = () => {
return (
<><View>
<Text>Hi</Text>
</View><View>
<ImageDetail
title="Forest"
imageSource={require('../../assets/forest.jpg')}
score={9} />
<ImageDetail
title="Beach"
imageSource={require('../../assets/beach.jpg')}
score={7} />
<ImageDetail
title="Mountain"
imageSource={require('../../assets/mountain.jpg')}
score={10} />
</View></>
);
};
const styles = StyleSheet.create({});
export default ImageScreen;
ImageDetail.js
import React from "react";
import {View, Text, StyleSheet, Image} from 'react-native';
const ImageDetail = props => {
return(
<View>
<Image source={props.imageSource}/>
<Text>{props.title}</Text>;
<Text>Image Score - {props.score}</Text>
</View>
);
}
const styles = StyleSheet.create({});
export default ImageDetail;
App.js
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import HomeScreen from "./src/screens/screens/HomeScreen";
import ComponentsScreen from "./src/screens/screens/ComponentsScreen";
import ListScreen from "./src/screens/screens/ListScreen";
import ImageScreen from "./src/screens/ImageScreen";
import CounterScreen from "./src/screens/screens/CounterScreen";
import ColorScreen from "./src/screens/screens/ColorScreen";
import SquareScreen from "./src/screens/screens/SquareScreen";
import TextScreen from "./src/screens/screens/TextScreen";
import BoxScreen from "./src/screens/screens/BoxScreen";
import PhoneCall from "./src/screens/screens/PhoneCall";
import DoctorResults from "./src/screens/DoctorResults";
const navigator = createStackNavigator(
{
Home: HomeScreen,
Components: ComponentsScreen,
List: ListScreen,
Image: ImageScreen,
Counter: CounterScreen,
Color: ColorScreen,
Square: SquareScreen,
Text: TextScreen,
Box: BoxScreen,
Phone: PhoneCall,
Doctor: DoctorResults,
},
{
initialRouteName: "Home",
defaultNavigationOptions: {
title: "App",
},
}
);
export default createAppContainer(navigator);
Here's the results but I don't get any image to appear
You can try giving some width and height to the image component like
<Image
style={{width: 50, height: 50}} //or 100%
source={require("dir")} // Make sure image dir is correct
/>
Hope it will help solve your problem.
Please check your image directory is correct or not.
Ctrl+Click to your image assets directory.
If image can open, it is correct route. If not, you need to check your image directory again.
imageSource={(require('../../assets/image.png'))}
I try with your code and show like this. I think problem is with your image and image directory.
Please try to add width and height in image.
<View>
<Image style={{width: 100, height: 100}} source= {props.imageSource} />
<Text>{props.title}</Text>
<Text>Image Score - {props.score}</Text>
</View>
Related
I am following this YouTube tutorial https://www.youtube.com/watch?v=qJaFIGjyRms and at the 20 minute mark he imports Tailwind as tw then proceeds to use it in app.js I have done the exact same thing yet I am getting the error
"TypeError: (0, _tailwindRn.tw) is not a function. (In '(0, _tailwindRn.tw)("justify-center items-center")', '(0, _tailwindRn.tw)' is undefined)"
screenshot
my code:
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import {tw} from 'tailwind-rn';
export default function App() {
return (
<View style={tw("justify-center items-center")}>
<Text>Open up App.js to start working on your app!</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Hi I was facing the same problem
I used npx setup-tailwind-rn to set up tailwind. The below code worked for me:
import { StatusBar } from 'expo-status-bar';
import { Button, StyleSheet, Text, View } from 'react-native';
import React from 'react';
//import tw from 'tailwind-rn'
import {useTailwind} from 'tailwind-rn'
export default function App() {
const tailwind = useTailwind();
return (
<View style={tailwind('flex-1 justify-center items-center')}>
<Text>Hello World!!</Text>
<Button title='Click-me'></Button>
</View>
);
}
You need to install the tailwind-rn npm package.
More info https://www.npmjs.com/package/tailwind-rn
If you go back and look at the tutorial, they are using
import tw from 'tailwind-rn';
not
import {tw} from 'tailwind-rn';
You can name the default export of a library whatever you like in the import statement.
import TailWind from 'tailwind-rn';
import t from 'tailwind-rn';
etc.
I got this error message while working on the other file
Error: Couldn't find a 'component', 'getComponent' or 'children' prop for the screen 'Store'. This can happen if you passed 'undefined'. You likely forgot to export your component from the file it's defined in, or mixed up default import and named import when importing.
my Store file - screen/Store.js:
import React from "react";
import {
StyleSheet,
SafeAreaView,
View,
Text,
TouchableOpacity,
Image,
Animated
} from "react-native";
import { isIphoneX } from 'react-native-iphone-x-helper'
import { icons, COLORS, SIZES, FONTS } from '../constants'
const Store = ({ route, navigation }) => {
...
export default Store;
my Home file - screens/Home.js
import React from "react";
import {
SafeAreaView,
View,
Text,
StyleSheet,
TouchableOpacity,
Image,
FlatList
} from "react-native";
import { icons, images, SIZES, COLORS, FONTS } from '../constants'
const Home = ({ navigation }) => {
...
export default Home;
my navigation file -navigation/tab.js:
import React from 'react';
import {
View,
Image,
TouchableOpacity
} from 'react-native';
import { createBottomTabNavigator, BottomTabBar } from "#react-navigation/bottom-tabs"
import Svg, { Path } from 'react-native-svg';
import { isIphoneX } from 'react-native-iphone-x-helper';
import {Home, User} from '../screens'
import { COLORS, icons } from "../constants"
const Tabs = () => {
...
}
export default Tabs
and my App.js file in the main folder
import React from 'react';
import { createStackNavigator } from "#react-navigation/stack";
import { NavigationContainer } from '#react-navigation/native';
import { Store, OrderDelivery, User } from './screens';
import Tabs from './navigation/tabs';
const Stack = createStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerShown: false
}}
initialRouteName={'Home'}
>
<Stack.Screen name="Home" component={Tabs} />
<Stack.Screen name="Store" component={Store} />
<Stack.Screen name="OrderDelivery" component={OrderDelivery} />
<Stack.Screen name="User" component={User} />
</Stack.Navigator>
</NavigationContainer>
)
}
export default App;
I understand what the message means but I dont get what did I do wrong and how to fix it, please help.
Are you sure you imported React in Store.js, try adding the import React from 'react';
Try to import Store from './screens/Store';
I am making an app following this tutorial:
I just did it exacly the same. It compiles but the button of the Drawer Menu does not work. This is the code where the button is:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {createBottomTabNavigator} from 'react-navigation';
import ScreenOne from './TabNavigator/ScreenOne';
import ScreenTwo from './TabNavigator/ScreenTwo';
import { Container, Header,Left,Right,Icon } from 'native-base';
export default class AppTabNavigator extends React.Component{
static navigationOptions = ({navigation}) =>{
return{
headerLeft:(
<View style={{padding:10}}>
<Icon name ="menu" style={{fontSize: 24, color : 'black'}} onPress={()=>navigation.navigate('DrawerOpen')} />
</View>
)
}
}
render(){
return(
<HomeScreenTabNavigator screenProps={{navigation: this.props.navigation}}/>
)
}
}
const HomeScreenTabNavigator = new createBottomTabNavigator({
ScreenOne:{
screen: ScreenOne,
navigationOptions:{
tabBarLabel: 'Feed'
}
},
ScreenTwo:{
screen: ScreenTwo,
navigationOptions:{
tabBarLabel: 'Feed' }
}
})
Since version 2.X of react-navigation you can't use the following code:
navigation.navigate('DrawerOpen')
But instead you need to use:
navigation.openDrawer()
See also the Drawer documentation
My first page with FlatList is :
import React, { Component } from 'react';
import { View, StyleSheet, FlatList, Text, TouchableHighlight } from 'react-native';
import { StackNavigator } from 'react-navigation';
import MoreInfo from './MoreInfo';
export default class Page1 extends Component {
constructor(props){
super(props);
}
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<FlatList
data={users}
renderItem={
({item}) =>
<TouchableHighlight onPress={() => navigate('MoreInfo', { name: 'Jane' })}>
<Text style={styles.welcome}> {item.name} </Text>
</TouchableHighlight>
}
keyExtractor={item => item.index}
>
</FlatList>
</View>
);
}
}
const App = StackNavigator({
Page1: {screen: Page1},
MoreInfo: { screen: MoreInfo },
})
I am able to get the data displayed in a FlatList without using the navigation. But when I put Navigation and click any item on the list, I get the error:
Please help. Trying this since 3 days.
My index.android.js is
import React, { Component } from 'react';
import { AppRegistry} from 'react-native';
import MyApp2 from './src/components/MyApp2';
const MyApp2 = StackNavigator({
Page1: {screen: Page1},
MoreInfo: { screen: MoreInfo },
})
AppRegistry.registerComponent('MyApp2', () => MyApp2);
And My './src/components/MyApp2' is:
import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput, ScrollView, Alert,
FlatList, ActivityIndicator, Image,TouchableOpacity } from 'react-native';
import { Container } from 'native-base';
import AppHeader from './AppHeader';
import AppBody from './AppBody';
import AppFooter from './AppFooter';
export default class MyApp2 extends Component{
render(){
return(
<Container>
<AppHeader />
<AppBody/>
<AppFooter />
</Container>
)
}
}
I further have some tabs in the AppBody and including Page1 somewhere there. How would I go about it?
It doesn't look like you're importing Page1 anywhere and it's odd that you're importing MyApp2 and then defining a const for the StackNavigator that is also called MyApp2. I cannot test this since there are other files being imported, but I believe you just need to:
fix your imports,
fix your naming conflicts,
register all of your screens with StackNavigator so they all have access to the navigation prop,
and register the StackNavigator for your AppRegistry.
Try this:
Leave ./src/components/MyApp2 as is. Then make these edits (I'll be making the assumption that MyApp2, Page1, and MoreInfo are all located in ./src/components/:
Page1 file (whatever that is named):
import React, { Component } from 'react';
import { View, StyleSheet, FlatList, Text, TouchableHighlight } from 'react-native';
export default class Page1 extends Component {
constructor(props){
super(props);
}
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<FlatList
data={users}
renderItem={
({item}) =>
<TouchableHighlight onPress={() => navigate('MoreInfo', { name: 'Jane' })}>
<Text style={styles.welcome}> {item.name} </Text>
</TouchableHighlight>
}
keyExtractor={item => item.index}
>
</FlatList>
</View>
);
}
}
index.android.js
import React, { Component } from 'react';
import { AppRegistry} from 'react-native';
import { StackNavigator } from 'react-navigation';
// Making an assumption for where these files are located
// since it's not in the original question.
import MyApp2 from './src/components/MyApp2';
import MoreInfo from './src/components/MoreInfo';
import Page1 from './src/components/Page1';
/**
* This presumes that MyApp2 is the screen that will be loaded first.
* I don't know how you are getting to Page1, but it will be accessible
* if you navigate to it like so:
* this.props.navigation.navigate('Page1')
* Once there, the navigate() in the FlatList of Page1 should work as written.
*/
const RootNavigator = StackNavigator({
MyApp2: {screen: MyApp2},
Page1: {screen: Page1},
MoreInfo: { screen: MoreInfo },
})
AppRegistry.registerComponent('MyApp2', () => RootNavigator);
In your index.android.js file , you are using StackNavigator but you have not imported it .
use :
import { StackNavigator } from react-navigation
I can't get why Button in the HomeScreen is not opening a Drawer. Button shows but nothing happens when you click on it. Here is a code, I did all needed imports while its still not working. Are there any examples of this approach which will work?
HomeDrawer.js
import React from 'react';
import { DrawerNavigator } from 'react-navigation';
import HomeScreen from '../screens/HomeScreen';
import FoodScreen from '../screens/FoodScreen';
import RestaurantsScreen from '../screens/RestaurantsScreen';
import ProfileScreen from '../screens/ProfileScreen';
import FavoritesScreen from '../screens/FavoritesScreen';
import SettingsScreen from '../screens/SettingsScreen';
import SideBar from './SideBar';
const HomeDrawer = DrawerNavigator({
home: { screen: HomeScreen },
food: { screen: FoodScreen },
restaurants: { screen: RestaurantsScreen},
profile: { screen: ProfileScreen },
settings: { screen: SettingsScreen }
}, {
contentComponent: (props) => <SideBar {...props} />
});
export default HomeDrawer;
HomeScreen.js
import React from "react";
import { StatusBar } from "react-native";
import {
Button,
Text,
Container,
Card,
CardItem,
Body,
Content,
Header,
Title,
Left,
Icon,
Right
} from "native-base";
export default class HomeScreen extends React.Component {
render() {
return (
<Container>
<Header>
<Left>
<Button
transparent
onPress={() => this.props.navigation.navigate("DrawerOpen")}>
<Icon name="menu" />
</Button>
</Left>
<Body>
<Title>HomeScreen</Title>
</Body>
<Right />
</Header>
</Container>
);
}
}
How to make that button open a drawer?
try this
<Button transparent onPress={()=>this.props.navigation.openDrawer()}>
Refer to the examples that react-navigation have in their git repo, it is stated there under
react-navigation/examples/NavigationPlayground/js/MultipleDrawer.js