Develop Reference

I am trying to add images in here but the moment I use this.props.imageUri. I get a blank image.. Couldn't find a solution

I am trying to add images to my application home page but it seems whenever I use this.props.imageUri it just doesn't show the images anymore. I tried to do it using Image source.. it works but when I created Location.js and add this.props.imageUrl the image doesn't show anymore.. so I don't know what to do.
This is my Home.js file
import React from "react";
import {
View,
Text,
Button,
SafeAreaView,
TextInput,
StatusBar,
Platform,
ScrollView,
Image,
imageUri,
StyleSheet,
} from "react-native";
import ProductsList from "../../components/productsList/ProductsList";
import { styles } from "../../styles/authStyle";
import Icon from "react-native-vector-icons/Ionicons";
import { fontSize } from "styled-system";
import Location from "../components/Location";
export default function Search({ navigation }) {
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
<View
style={{
height: 80,
backgroundColor: "white",
borderBottomWidth: 1,
borderBottomColor: "#dddddd",
}}
>
<View
style={{
flexDirection: "row",
padding: 10,
backgroundColor: "white",
marginHorizontal: 20,
shadowOffset: { width: 0, height: 0 },
shadowColor: "black",
shadowOpacity: 0.2,
borderRadius: 50,
elevation: 1,
}}
>
<Icon name="ios-search" size={20} style={{ marginRight: 10 }} />
<TextInput
underlineColorAndroid="transparent"
placeholder="City, airport, adrerss, or hotel"
placeholderTextColor="grey"
style={{ flex: 1, fontWeight: "700", backgroundColor: "white" }}
/>
</View>
</View>
<ScrollView scrollEventThrottle={16}>
<View style={{ flex: 1, backgroundColor: "white", paddingTop: 20 }}>
<Text
style={{
fontSize: 24,
fontWeight: "700",
paddingHorizontal: 20,
marginLeft: 100,
}}
>
FIND YOUR RIDE
</Text>
<View style={{ height: 130, marginTop: 20 }}>
<ScrollView>
<Location
imageUri={require("../home/nicosia.png")}
name="nicosia"
/>
</ScrollView>
</View>
</View>
</ScrollView>
</View>
</SafeAreaView>
);
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
});
}
And this is Location.js
import React, { Component } from "react";
import { View, Text, StyleSheet, Image, imageUri } from "react-native";
class Location extends Component {
render() {
return (
<View
style={{
alignItems: "center",
height: 130,
width: 130,
marginLeft: 20,
borderWidth: 0.5,
borderColor: "#dddddd",
}}
>
<View style={{ flex: 2 }}>
<Image
source={this.props.imageUri}
style={{
flex: 1,
width: null,
height: null,
resizeMode: "cover",
}}
/>
</View>
<View style={{ flex: 1, paddingLeft: 3, paddingTop: 10 }}>
<Text>{this.props.name}</Text>
</View>
</View>
);
}
}
export default Location;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
});

Set width and height to a fixed size or just omit them.
<View style={{ flex: 2 }}>
<Image
source={this.props.imageUri}
style={{
flex: 1,
{/* Don't set width and height to null */}
width: null,
height: null,
resizeMode: "cover",
}}
/>
</View>
<View style={{ flex: 1, paddingLeft: 3, paddingTop: 10 }}>
<Text>{this.props.name}</Text>
</View>

place text next to thumbnail instead of center

Currently, my username text appears in the center of the view. I want to change it such that it appears on the exact right of the thumbnail. If I remove the alignItems: 'center', from the item, it disturbs the whole style. How else can I fix this?
import { StyleSheet, Alert } from 'react-native';
import { View, Text, Button, Thumbnail } from 'native-base';
import Icon from 'react-native-vector-icons/FontAwesome';
import { moderateScale } from 'react-native-size-matters';
import { TouchableOpacity } from 'react-native-gesture-handler';
return (
<View style={styles.item}>
<TouchableOpacity>
<Thumbnail
style={styles.thumbnail}
source={{
uri:
'https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/afro_woman_female_person-512.png',
}}
/>
</TouchableOpacity>
<View style={styles.nameContainer}>
<Text style={styles.userName}>USER NAME</Text>
</View>
<Button
rounded
style={styles.deleteButton}>
<Icon name="trash-o" size={moderateScale(20)} color="black" />
</Button>
</View>
);
};
const styles = StyleSheet.create({
item: {
backgroundColor: 'pink',
borderRadius: moderateScale(20),
padding: moderateScale(20),
marginVertical: moderateScale(8),
marginHorizontal: 16,
height: moderateScale(70),
justifyContent: 'space-between',
flexDirection: 'row',
alignItems: 'center',
},
thumbnail: {
height: 70,
width: 70,
position: 'relative',
},
nameContainer: {
//flex: 1,
// alignItems: 'center',
// textAlign: 'center',
},
userName: {
paddingRight: moderateScale(55),
paddingLeft: moderateScale(20),
//textAlign: 'center',
color: 'white',
fontWeight: '900'
},
deleteButton: {
backgroundColor: '#31C283',
width: moderateScale(45),
justifyContent: 'center',
},
horizontalLine: {
marginTop: moderateScale(30),
width: '87%',
height: moderateScale(1),
backgroundColor: 'grey',
alignSelf: 'center',
},
});
I tried creating a snack expo but I am unable to use native base in it.

You have added unwanted padding, Change the styles like below and it will place the text next to the Thumbnail.
nameContainer: {
flex: 1,
},
userName: {
color: 'white',
fontWeight: '900'
},

Maximum call stack size exceeded when using React Native Navigation

I have just started using React Native so I am still learning.
I am trying to implement Navigation to my app and almost everything works fine except for one page.
In the app, when the user signs up, he can sign up as either an individual or as an organization, which would lead him to different signing up forms depending on his choice.
However, when I select either option the app crashes and I get the following error:
Uncaught Error: RangeError: Maximum call stack size exceeded, stack.
I have looked online for answers and most of the time it's because there is an infinite loop in the navigation. However, I don't see anywhere in the code where there might be a loop and I did it as I did for the other pages, which, once again, work fine.
Here is the code for the App.js
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { LinearGradient } from 'expo-linear-gradient';
import WelcomeToKarma from "./components/WelcomeToKarma.js";
import Login from "./components/Login.js";
import ForgotPass from "./components/ForgotPass.js";
import UserRegistration from "./components/UserRegistration.js";
import OpenEmail from "./components/OpenEmail.js";
function InitialScreen({ navigation }) {
return (
<View style={styles.container}>
<LinearGradient
style={{ alignItems: 'center', justifyContent: 'center', flex: 1, width: '100%' }}
colors={['#00c5c4', '#01a7a6']}
start={{ x: 1, y: 0 }}
end={{ x: 0, y: 0 }}>
<Text style={styles.textHeader}>KARMA</Text>
<Text style={styles.text}>Lorem ipsum dolo ecte </Text>
<Text style={styles.text}>adipisicing elit sed do</Text>
<TouchableOpacity
style={styles.buttonContainer}
onPress={() => navigation.navigate('Back')}
>
<Text style={{ color: "white", fontSize: 20, }}>Sign Up</Text>
</TouchableOpacity>
<Text
style={styles.loginText}
onPress={() => navigation.navigate('Loginate')}
>
Already have an account? Login
</Text>
</LinearGradient>
</View>
);
}
const Stack = createStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={InitialScreen} options={{ headerShown: false }} />
<Stack.Screen name="Back" component={WelcomeToKarma} options={{ headerShown: false }} />
<Stack.Screen name="UserRegistration"
component={UserRegistration}
options={{
headerTintColor: '#01b0b0',
title: 'Sign up',
headerTitleStyle: {
textAlign: 'left',
fontWeight: 'bold',
fontSize: 22,
color: 'black',
}
}} />
<Stack.Screen name="Loginate" component={Login}
options={{
headerTintColor: '#01b0b0',
title: 'Login',
headerTitleStyle: {
textAlign: 'left',
color: 'black',
fontSize: 22,
}
}} />
<Stack.Screen name="ForgotPass" component={ForgotPass}
options={{
headerTintColor: '#01b0b0',
title: 'Forgot Password',
headerTitleStyle: {
textAlign: 'left',
color: 'black',
fontSize: 22,
}
}} />
<Stack.Screen name="OpenEmail" component={OpenEmail}
options={{
headerTintColor: '#01b0b0',
title: "Forgot Password",
headerTitleStyle: {
textAlign: 'left',
color: 'black',
fontSize: 22,
}
}} />
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
textHeader: {
color: 'white',
fontSize: 80,
},
text: {
color: 'white',
fontSize: 20,
},
buttonContainer: {
borderColor: 'white',
borderWidth: 2,
borderRadius: 30,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
height: 44,
width: 200,
marginBottom: 20,
marginTop: 10,
position: 'absolute',
bottom: 60,
},
loginText: {
color: "white",
fontSize: 15,
marginTop: 10,
marginBottom: 20,
bottom: 10,
position: 'absolute',
justifyContent: 'center',
alignItems: 'center'
},
});
Here is the code for WelcomeToKarma.js which is where the user chooses if he is an individual or an organization.
import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, ScrollView, SafeAreaView } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import Constants from 'expo-constants';
import heart from '../assets/heart.png';
import earth from '../assets/earth.png';
import Card from './Card.js';
export default class WelcomeToKarma extends Component {
render() {
const { navigate } = this.props.navigation;
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={styles.container}>
<View style={styles.welcomeText}>
<Text style={styles.header}>Welcome to KARMA</Text>
<Text style={styles.text}>Lorem ipsum dolo sit amet, consectetur adip isicing elit, sed do eiusmod</Text>
</View>
<ScrollView
scrollEventThrottle={16}
horizontal={true}
showsHorizontalScrollIndicator={false}
style={styles.scrollViewView}>
<Card imageUri={heart} question="Are you an individual?" page="UserRegistration"></Card
{/* This is where the app crashes when I press the TouchableOpacity*/}
<Card imageUri={earth} question="Are you an organization?" page=""></Card>
{/* And here as well, I know the page parameter is empty, that's because I still haven't done the page for it */}
</ScrollView>
<View style={styles.bottomView}>
<Text style={styles.boldText}>Already on Karma?</Text>
<View style={styles.buttonView}>
<LinearGradient
style={{ borderRadius: 22, alignItems: 'center', justifyContent: 'center', flexDirection: 'row' }}
colors={['#00c5c4', '#01a7a6']}
start={{ x: 1, y: 0 }}
end={{ x: 0, y: 0 }}>
<TouchableOpacity
style={styles.loginButton}
onPress={() => navigate('Loginate')}
>
<Text style={styles.login}>Login</Text>
</TouchableOpacity>
</LinearGradient>
</View>
</View>
</View>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5F5F5',
marginTop: Constants.statusBarHeight,
alignItems: 'center',
justifyContent: 'center',
},
welcomeText: {
marginBottom: 10,
},
scrollViewView: {
alignItems: 'center',
pagingEnabled: 'true',
showPageIndicator: 'true',
marginBottom: 20,
},
bottomView: {
backgroundColor: 'white',
width: '100%',
marginHorizontal: 20,
paddingBottom: 30,
},
buttonView: {
backgroundColor: 'white',
alignItems: 'center',
width: '100%'
},
header: {
fontSize: 20,
marginHorizontal: 20,
marginVertical: 10,
textAlign: 'left'
},
text: {
fontSize: 15,
marginHorizontal: 20,
marginVertical: 10,
textAlign: 'left'
},
boldText: {
fontSize: 15,
marginHorizontal: 20,
marginVertical: 10,
textAlign: 'left',
fontWeight: 'bold'
},
loginButton: {
borderRadius: 22,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
height: 44,
width: '85%',
padding: 20,
backgroundColor: 'white',
margin: 2,
},
login: {
color: '#01b0b0',
textAlign: 'center',
fontSize: 20,
},
});
I'm basically trying to pass the ToucheableOpacity onPress as a parameter to Card. The app crashes when I press these buttons.
And here is the code for the Card.js.
import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Image } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
class Card extends Component {
constructor(props) {
super(props);
this.navigate.bind(this);
}
navigate(txt) {
this.navigate(txt);
}
render() {
return (
<View style={styles.container}>
<View style={{ justifyContent: 'space-between', alignItems: 'center', flex: 1 }}>
<Image source={this.props.imageUri} style={{ width: '50%', height: '50%', resizeMode: 'cover' }}></Image>
</View>
<View style={{ justifyContent: 'center', flex: 1 }}>
<Text style={{ marginVertical: 5, fontWeight: 'bold' }}>{this.props.question}</Text>
<Text style={{ marginVertical: 5 }}>Lorem ipsum dolor sit amet, consectetur adip isicing elit,
sed do eiusm ut labore et dolore magna aliqua
</Text>
<View>
<LinearGradient
style={styles.signupButtonView}
colors={['#00c5c4', '#01a7a6']}
start={{ x: 1, y: 0 }}
end={{ x: 0, y: 0 }}
>
<TouchableOpacity
onPress={() => this.navigate(this.props.page)}>
<Text style={styles.signup} >Sign up</Text>
</TouchableOpacity>
</LinearGradient>
</View>
</View>
</View>
)
}
}
export default Card;
const styles = StyleSheet.create({
container: {
height: '95%',
width: 250,
borderRadius: 20,
borderBottomWidth: 10,
borderBottomColor: '#01b0b0',
marginHorizontal: 10,
marginVertical: 10,
shadowColor: 'black',
shadowOffset: { width: 0, height: 3 },
shadowRadius: 6,
shadowOpacity: 0.26,
elevation: 8,
padding: 20,
backgroundColor: 'white'
},
signupButtonView: {
borderRadius: 22,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
padding: 20,
height: 44,
width: 200,
},
signupButton: {
borderRadius: 22,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
padding: 20,
height: 44,
width: 200,
},
signup: {
color: 'white',
fontSize: 20,
},
sty: {
borderRadius: 30,
}
});
The navigation works perfectly fine with every other page so I don't understand why it can't with this one. Could it be because I am not passing the ToucheableOpacity onPress method correctly? I have tried different ways to pass the onPress as a parameter but it looks like this way is the best way (if not the only?)
I'm also taking any tips and suggestions to improve my coding, as I said: I have just started learning React Native.

This looks very recursive:
navigate(txt) {
this.navigate(txt);
}
You have bound navigate to the class. You are inside the function navigate, and the line in there is calling itself. You will get a stackover.com
You need to pick up the navigate props in 'Card' like you did in 'WelcomeToKarma' and use this to navigate.
const { navigate } = this.props.navigation;
so navigate could become
navigate(txt) {
this.props.navigate(txt);
}
problem solved!

react native view overflow

I'm trying to imitate the image.
I'm having a problem with the button with the like in the middle I can not imitate it.
Since I read it seems that native react on android has a problem with overflow.
I thought you could use a:
marginTop: -25
but it does not seem to solve the problem.
Some advice?
Link expo: https://snack.expo.io/Hk1yUyzB7
Code:
import React, { Component } from 'react';
import { View, StyleSheet, Image, Text } from 'react-native';
//import ViewOverflow from 'react-native-view-overflow';
export default class App extends Component {
render() {
var account = (
<View>
<View
style={{
paddingTop: 20,
paddingLeft: 20,
flexDirection: 'row',
}}>
<Image
style={{ width: 50, height: 50, borderRadius: 25 }}
source={{
uri:
'http://www1.pictures.zimbio.com/bg/Number+Four+World+Premiere+h5-FoI0M8-gl.jpg',
}}
/>
<View
style={{
paddingLeft: 20,
}}>
<Text>Yulia James</Text>
<Text
style={{
color: '#ccc',
}}>
6 hrs · IIT London
</Text>
</View>
</View>
<Text
style={{
paddingTop: 20,
paddingLeft: 20,
paddingBottom: 20,
}}>
Making everyday worth it :)
</Text>
<View
style={{
paddingBottom: 20,
}}>
<Image
style={{
width: '100%',
height: 200,
}}
source={{
uri:
'http://www.wordzz.com/wp-content/uploads/2016/11/Night-Ratri.jpg',
}}
/>
</View>
</View>
);
var com = (
<View
style={{
backgroundColor: 'rgba(230,230,230,0.8)',
//height: 40,
alignItems: 'center',
//justifyContent: 'center',
padding: 5,
flex: 1,
}}>
<Text
style={{
color: '#ccc',
fontSize: 18,
}}>
Comment
</Text>
</View>
);
return (
<View
style={{
flex: 1,
backgroundColor: '#e7eff0',
}}>
<View
style={{
backgroundColor: 'rgba(255,255,255,0.8)',
marginTop: 50,
borderTopWidth: 1,
borderBottomWidth: 1,
borderColor: '#e7e7e7',
}}>
{account}
<View
style={{
backgroundColor: '#fff',
borderTopWidth: 1,
borderColor: '#ccc',
//alignItems: 'center',
//justifyContent: 'center',
}}>
<View style={styles.container2}>
{com}
<View
style={{
//backgroundColor: '#000',
borderRadius: 40,
height: 80,
width: 80,
alignItems: 'center',
justifyContent: 'center',
borderColor: '#ccc',
borderWidth: 1,
}}>
<Image
style={{
//resizeMode: 'cover',
height: 40,
width: 40,
}}
source={{
uri: 'http://i.imgur.com/k5jMsaH.gif',
}}
/>
</View>
{com}
</View>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container2: {
flexDirection: 'row',
},
});

Issue styling a header in React Native

I have this header written in CSS and HTML, I'm trying to make it in react native, but seems like position: 'absolute' removes my icon from the scene.
So, In my react-native app I have the following markup:
<View
style={header}>
<TouchableWithoutFeedback
onPress={this.props.callback}>
<View>
<Image
style={headerIcon}
source={require('./img/back.png')} />
</View>
</TouchableWithoutFeedback>
<Text style={headerTitle}>{this.props.title.toUpperCase()}</Text>
</View>
And the following stylesheet
const styles = StyleSheet.create({
header: {
height: 55,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: colors.white,
flexDirection: 'row'
},
headerTitle: {
color: colors.black,
fontFamily: 'Dosis',
fontSize: 15
},
headerIcon: {
width: 22,
height: 16
}
})
Can someone explain me how to make the style for the react-native header to look like http://jsbin.com/bireqabujo/2/edit?html,css,output ?

Try This
<View style={styles.header}>
<TouchableWithoutFeedback
onPress={this.props.callback}>
<View>
<Image
style={styles.headerIcon}
source={require('./img/back.png')} />
</View>
</TouchableWithoutFeedback>
<View style={styles.headerTitleWrapper}><Text style={styles.headerTitle}>MY TITLE</Text></View>
</View>
And change your style to this
const styles = StyleSheet.create({
header: {
height: 55,
alignItems: 'center',
backgroundColor: "#fff",
flexDirection: 'row'
},
headerTitleWrapper: {flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
headerTitle: {
color: 'black',
fontFamily: 'Dosis',
fontSize: 15
},
headerIcon: {
width: 22,
height: 16
}
})
Check This on
https://rnplay.org/apps/iSpc1Q