In react-native i am trying to make a scrollview where every element has a title and an image. Because I want to load the image from the url, I wrote the following code:
import {Text, TouchableOpacity,Image } from 'react-native'
import React from 'react'
const CatagoryCard = ({imgUrl,title}) => {
return (
<TouchableOpacity>
<Image
source = {{uri:imgUrl}}
resizeMode = 'contain'
className = "h-20 w-20 rounded flex-2"
/>
<Text>{title}</Text>
</TouchableOpacity>
);
};
export default CatagoryCard;
And calling them from another parent component class.
import { View, Text, ScrollView } from 'react-native'
import React from 'react'
import CatagoryCard from './CatagoryCard'
const Catagories = () => {
return (
<ScrollView horizontal
showsVerticalScrollIndicator={false}
contentContainerStyle={{
paddingHorizontal:15,
paddingTop:10
}}>
<CatagoryCard imgUrl = "https://i.ibb.co/ZYvGfFY/Untitled-design-7.png" title = " TEST 1"/>
<CatagoryCard imgUrl = "https://i.ibb.co/ZYvGfFY/Untitled-design-7.png" title = " TEST 2"/>
<CatagoryCard imgUrl = "https://i.ibb.co/ZYvGfFY/Untitled-design-7.png" title = " TEST 3"/>
</ScrollView>
)
}
export default Catagories
The problem is the title are showing perfectly on the view in individual elements but the images are not loading for some unknown reason.
Set size for the image:
<TouchableOpacity>
<Image
style={{height: 50, width: 50}}
source={{
uri: 'https://reactnative.dev/img/tiny_logo.png',
}}
/>
<Text>Text</Text>
</TouchableOpacity>
Use this it worked for me,
import { View, Text, TouchableOpacity, Image } from 'react-native'
import React from 'react'
const CategoryCard = ({imgUrl, title}) => {
return (
<TouchableOpacity className="mr-2 relative">
<Image style={{height: 50, width: 50}} source= {{ uri: imgUrl }} />
<Text className="bottom-1 left-1 absolute">{title}</Text>
</TouchableOpacity>
)
}
export default CategoryCard
I think there is some problem with the tailwind css
For me wrapping it with a View component works for me. Also make sure that your UI folders are listed in the tailwind config file.
return (
<TouchableOpacity>
<View>
<Image
className="h-20 w-20 rounded"
source={{
uri: imgUrl,
}}
/>
</View>
<Text>{title}</Text>
</TouchableOpacity>
);
Related
I have been working on a React Native Project using Expo and been using NativeTailwind library for styles. The ios and android applications show different styles for the same code.
enter image description here
enter image description here
import { View, Text, Image, TextInput, ScrollView } from 'react-native'
import React, { useLayoutEffect } from 'react'
import { useNavigation } from '#react-navigation/native'
import { SafeAreaView } from 'react-native-safe-area-context';
import {AdjustmentsHorizontalIcon, ChevronDownIcon, ForwardIcon, MagnifyingGlassIcon, UserIcon} from "react-native-heroicons/outline"
// import { TextInput } from 'react-native-gesture-handler';
const HomeScreen = () => {
const navigation = useNavigation();
useLayoutEffect(() => {
navigation.setOptions({
headerShown: false
})
}, []);
return (
<SafeAreaView className="bg-white pt-2">
{/* <Text className="text-blue-500">HomeScreen</Text> */}
{/* Header */}
<View className="flex-row pb-3 items-center mx-4 px-3 space-x-2">
<Image source={{
uri: 'https://images.unsplash.com/photo-1662833832755-177c2ceb7869?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=828&q=80'
}}
className="h-7 w-7 bg-gray-300 p-[4%] rounded-full"
/>
<View className="flex-1">
<Text className="font-bold text-gray-400 text-xs">Deliver Now</Text>
<Text className="font-bold text-xl">Current Location
<ChevronDownIcon size={20} color="#00CCBB" />
</Text>
</View>
<UserIcon size={35} color="#00CCBB"></UserIcon>
</View>
{/* Search */}
<View className="flex-row items-center space-x-2 pb-4 mx-4">
<View className="flex-row flex-1 space-x-2 bg-gray-200 p-3">
<MagnifyingGlassIcon color="gray" size={20}></MagnifyingGlassIcon>
<TextInput placeholder="Restraunts and Cuisines" keyboardType='default'></TextInput>
</View>
<AdjustmentsHorizontalIcon color="#00CCBB"></AdjustmentsHorizontalIcon>
</View>
{/* Body */}
<ScrollView>
{/* Categories */}
{/* Featured Rows */}
</ScrollView>
</SafeAreaView>
)
}
export default HomeScreen
Why is this happening and how can I get both to have the same styles?
I have added a picture on the bottom of the mobile screen with style as:
bottomView: {
position: 'absolute',
bottom: 0,
},
Above this picture, I have my sign-in form, but because the picture is at the absolute position, it is not letting the keyboard open. I don't want to make this picture relative as it will disturb the picture. Can anyone help me in such a way that I want to keep the picture on the bottom too but want to open the keyboard as well.
Complete code is:
import React from "react";
import { Image, StyleSheet, Text, View ,TextInput,KeyboardAvoidingView} from "react-native";
import Authentication_Button from "./Authentication_Button";
import { SocialIcon } from 'react-native-elements'
const Login = () => {
const [email, setEmail] = React.useState('');
const [password, setPassword] = React.useState('');
return(
<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "height"}
style={styles.container} enabled>
{/* <View style={styles.container}> */}
<Image source={require('./assets/Logo.png')} style={styles.logo}/>
<TextInput
label="Email"
value={email}
onChangeText={email => setEmail(email)}
style={styles.TXT_INPUT}
placeholder="Email"
/>
<TextInput
label="Password"
value={password}
onChangeText={password => setPassword(password)}
style={styles.TXT_INPUT}
placeholder="Password"
/>
<View style={styles.auth}>
<Authentication_Button title={"Login"} backGroundColor={"#2c88d1"} textColor = {"#FFFFFF"} borderColor={"#2c88d1"}/>
<Authentication_Button title={"Signup"} backGroundColor={"#FFFFFF"} textColor = {"#2c88d1"} borderColor={"#2c88d1"}/>
</View>
<Text>- OR -</Text>
<Text>Sign in with </Text>
<SocialIcon
raised={true}
type='google'
style={{backgroundColor:"#2c88d1"}}
/>
<KeyboardAvoidingView style={styles.bottomView}>
<Image source={require('./assets/footLogin.png')} />
</KeyboardAvoidingView>
{/* </View> */}
</KeyboardAvoidingView>
)
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor:"#effdfe",
justifyContent:"center",
alignItems:"center",
padding:20
},
logo :{
width:150,
height:150,
resizeMode:'cover'
},
TXT_INPUT:{
marginBottom:10,
marginTop:10,
borderRadius:12,
borderWidth:1.4,
width:"85%",
paddingVertical:14,
backgroundColor:"#ffffff",
color:"#000000",
fontSize:18
},
auth:{
marginTop:10,
marginBottom:10,
width:"85%",
},
bottomView: {
marginTop:'5%',
position: 'absolute', //Here is the trick
bottom: 1, //Here is the trick
},
});
export default Login;
You can use KeyboardAvoidingView as a parent view. It will help you either your internal button or view is an absolute position
<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : "height"}
style={styles.container}
>
</KeyboardAvoidingView>
So the issue has been resolved. The issue was that the footer image was basically on top ofthe text input fields so as soon I changed the positions, it started to work!
Am building a carousel project using react native,
the code worked perfectly when i used only images ,before adding the sections "image" "title" in data
I get this error "Error while updating property 'src' of a view managed by: RCTImageView" after this code , i tried many possible methods but still no result.
import * as React from 'react';
import { StatusBar, FlatList, Image, Animated, Text, View, Dimensions, StyleSheet, TouchableOpacity } from 'react-native';
const { width, height } = Dimensions.get('screen');
const data = [
{imageUrl:'https://images.unsplash.com/photo-1509023464722-18d996393ca8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80',
title: "Hope"},
{imageUrl:'https://images.unsplash.com/photo-1494587351196-bbf5f29cff42?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1051&q=80',
title: "Hope2"},
{imageUrl:'https://images.unsplash.com/photo-1439792675105-701e6a4ab6f0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1052&q=80' ,
title: "Hope3"}
];
export default () => {
const scrollX=React.useRef(new Animated.Value(0)).current;
return (
<View >
<StatusBar hidden />
<View
style={StyleSheet.absoluteFillObject}>
{data.map((image,index)=>{
const inputRange=[
(index -1)*width,
index*width,
(index+1)*width
]
const opacity = scrollX.interpolate({
inputRange,
outputRange:[0,1,0]
})
return <Animated.Image
key={'image-${index}'}
source={{uri:image}}
style={[
StyleSheet.absoluteFillObject,
{opacity}
]}
/>
})}
</View>
<Animated.FlatList
data={data}
onScroll={Animated.event(
[{nativeEvent:{contentOffset:{x:scrollX}}}],
{useNativeDriver: true}
)}
keyExtractor={(_,index)=> index.toString()}
renderItem={({item})=> {
return <View >
<Text style={{color:'white'}}> {item.title} </Text>
<Image source={{uri:item.imageUrl}}
/>
</View>
}}
/>
</View>
);
};
Try this. Update source in Animated.Image to image.ImageUrl instead of just "image"
<Animated.Image
key={'image-${index}'}
source={{uri:image.imageUrl}}
style={[
StyleSheet.absoluteFillObject,
{opacity}
]}
/>
I am trying to build an app with 5 screens , this is my code.
++ ADDED APP.JS
// ./App.js
import React from "react";
import { NavigationContainer } from "#react-navigation/native";
import { MainStackNavigator } from "./Screens/StackNavigator";
import DrawerNavigator from "./Screens/DrawerNavigator";
const App = () => {
return (
<NavigationContainer>
<DrawerNavigator />
</NavigationContainer>
);
}
export default App
*HOMESCREEN.JS*
import React from "react";
import { View, Button, Text, StyleSheet,Image } from "react-native";
const Home = ({navigation}) => {
return (
<View style = {styles.firstPage}>
<View style = {styles.topHeader}><Text style={{fontSize:30}}>WORLD GUIDE</Text></View>
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Image
style={styles.tinyLogo}
source={require('../images/curvedArrow.png')}
/>
<Text> SLIDE RIGHT TO START EXPLORE !</Text>
</View>
</View>
);
};
*StackNavigator.JS*
import React from "react";
import { createStackNavigator } from "#react-navigation/stack";
import Home from "./HomeScreen";
import Fransa from "./FransaScreen";
import FransaGezi from"./FransaGezi";
const Stack = createStackNavigator();
const MainStackNavigator = () => {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Page1-Trav" component={FransaGezi}/>
</Stack.Navigator>
);
}
const FransaStackNavigator = () => {
return (
<Stack.Navigator>
<Stack.Screen name="Fransa" component={Fransa} />
</Stack.Navigator>
);
}
export { MainStackNavigator, FransaStackNavigator};
*FransaScreen.JS*
import React from "react";
import { View, StyleSheet, Text, Image,TouchableOpacity} from "react-native";
import Home from './HomeScreen'
import FransaGezi from './FransaGezi'
const Fransa = ({navigation}) => {
return (
<View style = {styles.firstPage}>
<View style = {styles.sectopHeader}>
<Image
style={styles.bigImage}
source={require('../images/eskis.jpg')}
/>
</View>
<View style = {styles.botHeader}>
<View style= {styles.firstBoxTop}>
<View style = {styles.firstBox}>
<TouchableOpacity onPress={() =>
navigation.navigate(FransaGezi)
}>
<Image source={require('../images/gezi.png')} style = {styles.ImageClass} />
</TouchableOpacity>
</View>
<View style = {styles.secBox}>
<TouchableOpacity>
<Image source={require('../images/food.png')} style = {styles.ImageClass} />
</TouchableOpacity>
</View>
</View>
<View style= {styles.firstBoxBot}>
<View style = {styles.firstBox}>
<TouchableOpacity>
<Image source={require('../images/para.png')} style = {styles.ImageClass} />
</TouchableOpacity>
</View>
<View style = {styles.secBox}>
<TouchableOpacity>
<Image source={require('../images/popmekan.png')} style = {styles.ImageClass} />
</TouchableOpacity>
</View>
</View>
</View>
</View>
);
};
*DrawerNavigator.JS*
import React from "react";
import { createDrawerNavigator } from "#react-navigation/drawer";
import { FransaStackNavigator } from "./StackNavigator";
import Home from "./HomeScreen";
import FransaGezi from "./FransaGezi";
import Fransa from "./FransaScreen";
import { StackActions } from "#react-navigation/native";
const Drawer = createDrawerNavigator();
const DrawerNavigator = () => {
return (
<Drawer.Navigator>
<Drawer.Screen name="Home" component={Home} />
<Drawer.Screen name="Fransa" component={FransaStackNavigator} />
</Drawer.Navigator>
);
}
export default DrawerNavigator;
*FransaGezi.JS*
import React from "react";
import { View, Button, Text, StyleSheet,Image } from "react-native";
const FransaGezi = ({}) => {
return (
<View style = {styles.firstPage}>
<View style = {styles.topHeader}><Text style={{fontSize:30}}>NOLUR ÇALIŞ</Text></View>
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Image
style={styles.tinyLogo}
source={require('../images/curvedArrow.png')}
/>
<Text> PLEASE WORK !</Text>
</View>
</View>
);
};
Drawer is working without problem, when I click "Fransa" going related page. But when I click first image in FransaScreen
<TouchableOpacity onPress={() =>
navigation.navigate(FransaGezi)
}>
I get this error message >>>
The action 'Navigate' with payload undefined was not handled by any navigator.
I know that I am missing some part about StackNavigator screen but when I change it like navigation.navigate(Home) it sends me Home page.
Waiting for your helps thanks a lot :)
When dealing with routes in React Native, there are some things you have to put in mind. First of all the route types. In your case you are using StackRoutes, so a basic structure for that would be:
A Routes file
import 'react-native-gesture-handler'
import React from 'react'
import { NavigationContainer } from '#react-navigation/native'
import { createStackNavigator } from '#react-navigation/stack'
import { Home } from './pages/Home'
import { Dashboard } from './pages/Dashboard'
import { Details } from './pages/Details'
const AppStack = createStackNavigator()
export const Routes = () => {
return (
<NavigationContainer>
<AppStack.Navigator headerMode='none'>
<AppStack.Screen name='Home' component={Home} />
<AppStack.Screen name='Dashboard' component={Dashboard} />
<AppStack.Screen name='Details' component={Details} />
</AppStack.Navigator>
</NavigationContainer>
)
}
In your app, I can see that you have routes with nested routes. In that case you can simply change your component at the AppStack.Screen, and put your routes there. Example:
import DrawerNavigator from 'yout path here'
import FransaGezi from 'your path here too'
// If this is the main Routes component, you should decide what types of navigation you'll use. In this case, let's use a Stack
const AppStack = createStackNavigator()
const Routes = () => {
return(
<NavigationContainer>
<AppStack.Navigator>
<AppStack.Screen name='Some cool name' component={//here you can put a single component or another routes component, such as DrawerNavigator} />
</Appstack.Navigator>
</NavigationContainer>
)
To navigate between routes you can simply do that
//import this hook in a page you want to navigate
import { useNavigation } from '#react-navigation/native'
//you can then use it in your component
const MyComponent = () => {
const navigation = useNavigation()
return (
<Something onClick={() => navigation.navigate('here you need to put the name prop that you provided in your AppStack.Screen, for example, "Some cool name" as specified up in the Routes)} />
)
}
Plus! If I didn't help you, here's a link to React Navigation. Your doubts will surely be answered there :) React Navigation
Thanks for your reading,I am a beginner into React Native,I find a similar question title on this site, but my question is different from that.
I use TouchableHighlight to press to open a new screen,I have succeeded. But the button did not change color. is that normal?
There are some of my try:
I try to use TouchableOpacity:The button will change it opacity and then open new screen
I also try to use TouchableNativeFeedback:The button behaves normally once，when i tap second time it has no behavior unless i have a long press.
when i use the button to do something else, not to open a new screen, it behaves correctly.
Here is my code:
import React from 'react';
import {
StyleSheet,
Text,
View,
Image,
TouchableHighlight,
} from 'react-native';
import MyInfoOrder from './MyInfoOrder';
export default class MyInfo extends React.Component{
_onPress(){
console.log("tap");
}
_onPressMessage(){
const { navigator } = this.props;
if(navigator) {
navigator.push({
name: 'order',
component: MyInfoOrder,
})
}
}
render(){
return(
<View style={styles.btnGroup}>
<TouchableHighlight style={[styles.btnItem]} onPress={this._onPressMessage.bind(this)}>
<View style={styles.btnItemView}>
<Image source={require('../images/myinfo/message.png')} style={styles.btnItemViewImage} />
<Text style={styles.btnItemViewText}>MyTest</Text>
<Image source={require('../images/more.png')} style={styles.btnItemViewArrow} />
</View>
</TouchableHighlight>
<View style={styles.lineStyle}></View>
<TouchableHighlight style={[styles.btnItem]} onPress={this._onPress}>
<View style={styles.btnItemView}>
<Image source={require('../images/myinfo/friends.png')} style={styles.btnItemViewImage} />
<Text style={styles.btnItemViewText}>MyTest</Text>
<Image source={require('../images/more.png')} style={styles.btnItemViewArrow} />
</View>
</TouchableHighlight>
<View style={styles.lineStyle}></View>
<TouchableHighlight style={[styles.btnItem]} onPress={this._onPress}>
<View style={styles.btnItemView}>
<Image source={require('../images/myinfo/col.png')} style={styles.btnItemViewImage} />
<Text style={styles.btnItemViewText}>MyTest</Text>
<Image source={require('../images/more.png')} style={styles.btnItemViewArrow} />
</View>
</TouchableHighlight>
</View>
)
}
}
const styles = StyleSheet.create({
btnGroup:{
marginBottom:30,
borderRadius:10,
backgroundColor:'#FFFFFF',
},
btnItem:{
height:104,
borderRadius:10,
},
btnItemView:{
borderRadius:10,
backgroundColor:'#FFFFFF',
height:106,
flexDirection:'row',
alignItems:'center',
},
btnItemViewImage:{
width:48,
height:48,
marginLeft:24,
marginRight:24
},
btnItemViewText:{
flex:1,
fontSize:32,
color:'#333333',
},
btnItemViewArrow:{
width:30,
height:30,
marginRight:30
},
})
I use:
"react": "15.4.2",
"react-native": "0.41.2",
platform：android 6.0
Adjust "delayPressIn" props in TouchableHighlight to 0 and everything work as expected.
if you want change color of TouchableHighlight when pressed you need to add
underlayColor in props