am new in react world, am trying to making a d-mart clone, my app is working fine but getting too much difference between two banner component , I don't want it , don't know why its getting. please try to fix my error.
You seem in special offer top and bottom difference is good but winter special top getting too much difference.
App.js
import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import Header from "./screens/Header";
import Banner from "./screens/Banner";
import Banner2 from "./screens/Banner2";
import { ScrollView } from "react-native";
function App() {
return (
<View style={styles.container}>
<ScrollView>
<Header />
<Banner />
<Banner2 name="Special Offer"/>
<Banner2 name="Winter Special"/>
<Banner2 name="New Year Special"/>
<Banner2 name="Festival Special"/>
</ScrollView>
<StatusBar style="auto" />
</View>
);
}
export default App;
Banner2.js
import React from "react";
import { View, Text, Image, StyleSheet } from "react-native";
const Banner2 = ({ name }) => {
return (
<View style={{ marginHorizontal: 7 }}>
<Text style={styles.offer}>{name}</Text>
<Image
style={{
height: 300,
width: "100%",
marginTop: -30,
alignItems: "center",
resizeMode: "contain",
}}
source={require("../images/banner1.jpg")}
/>
</View>
);
};
const styles = StyleSheet.create({
offer: {
marginTop: 20,
fontWeight: "bold",
fontSize: 20,
marginLeft: 10,
},
});
export default Banner2;
Related
I am developing a react-native application using expo cli, where I use bottomTabNavigator (which works fine) and the stackNavigator.
The application consists of 5 screens, which are navigated with the bottomTabNavigator, and of these five screens 2 need the stackNavigator.
For the implementation of the stack navigator I read the react native documentation, and reported in the project the example code that is on the documentation, to test the correct integration with my application.
My problem arises from the fact that importing the stack navigator into the actual screen where I need it, I am not shown any error messages, but neither do the navigation buttons of my test stack navigator appear.
Do you have any advice or suggestions as to why?
my stack navigator code : StackN.js
import * as React from 'react';
import { Button, View } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
function HomeScreen({navigation}){
return (
<View style={{flex:1, alignItems: 'center', justifyContent: 'center'}}>
<Button title="Go to Profile" onPress={()=>navigation.navigate('Profile')} />
</View>
);
}
function ProfileScreen({navigation}){
return (
<View style={{flex:1, alignItems: 'center', justifyContent: 'center'}}>
<Button title="Go to Notifications" onPress={()=>navigation.navigate('Profile')} />
<Button title="Go Back" onPress={()=>navigation.goBack()} />
</View>
);
}
const Stack = createStackNavigator();
function MyStack() {
return(
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Profile" component={ProfileScreen} />
</Stack.Navigator>
);
}
export default function App() {
return(
<NavigationContainer>
<MyStack />
</NavigationContainer>
);
}
screen where I import the stack navigator
import * as React from 'react';
import { View, Text, StyleSheet, Platform, Button,TouchableOpacity, ImageBackground, Dimensions, ScrollView } from 'react-native';
import Colors from '../constants/Colors';
import { Ionicons, MaterialCommunityIcons } from '#expo/vector-icons';
import ClubDetails from '../components/clubcomponents/ClubDetails';
import HeaderComponent from '../components/commoncomponents/HeaderComponent';
import { NavigationContainer } from '#react-navigation/native';
import StackN from '../navigations/StackN';
const ClubDetailScreen = props => {
return (
<View>
<HeaderComponent />
<View>
<ScrollView style={{height:100}}>
<Text>SCHERMATA NON DIRETTAMENTE COLLEGATA ALL'IMPLEMENTAZIONE ATTUALE : - TODO - </Text>
</ScrollView>
<NavigationContainer>
<StackN />
</NavigationContainer>
</View>
</View>
);
}
//opzioni di navigazione della pagina
const styles = StyleSheet.create({
header:{
marginTop:27,
height: 50,
backgroundColor: Colors.primary
},
text:{
},
icon: {
marginTop: 14,
marginLeft:3
},
title: {
marginVertical: -35,
fontSize: 20,
fontStyle: 'italic',
fontWeight: 'bold',
color: 'white',
textAlign: 'center'
},
avatar: {
marginLeft: Dimensions.get('window').width - 40,
marginTop: 7,
color: 'white'
},
dropdown:{
marginRight: 40,
}
});
export default ClubDetailScreen;
everyone. I'm new around here. I'm using Expo for building a react native app. I want to implement the custom fonts in my project. So I've gone through the docs, https://docs.expo.io/guides/using-custom-fonts
But the problem is only one components gets custom fonts, None of other components don't loads the custom fonts.
Here is my code,
App.js
import React from "react";
import {
StyleSheet,
SafeAreaView,
Image,
StatusBar,
Platform,
Text
} from "react-native";
import WelcomeScreen from "./app/screen/WelcomeScreen";
//import ViewImageScreen from "./app/screen/ViewImageScreen";
import {
useFonts,
Poppins_300Light,
Poppins_400Regular,
Poppins_400Regular_Italic,
Poppins_500Medium,
Poppins_700Bold,
Poppins_900Black,
} from "#expo-google-fonts/poppins";
import { AppLoading } from "expo";
export default function App() {
let [fontsLoaded] = useFonts({
"Shamim-Bn": require(
'./app/assets/Shamim-Font-Bn.ttf'
),
"Poppins-Light": Poppins_300Light,
"Poppins-Regular": Poppins_400Regular,
"Poppins-Regular-Italic": Poppins_400Regular_Italic,
"Poppins-Medium": Poppins_500Medium,
"Poppins-Bold": Poppins_700Bold,
"Poppins-Black": Poppins_900Black,
});
if(fontsLoaded){
return (
<SafeAreaView style={styles.container}>
// Only this components gets Custom font
<Text style={styles.custom}>পছন্দের ঘর এখন এখানেই...</Text>
<WelcomeScreen />
</SafeAreaView>
)
} else{
return(
<AppLoading />
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
marginTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
justifyContent: "center",
alignItems: "center",
},
custom:{
fontFamily: 'Shamim-Bn',
fontSize: 20,
}
});
WelcomeScreen.js
import React from 'react';
import {StyleSheet, ImageBackground, View, Image, Text} from 'react-native';
import colors from '../config/colors';
function WelcomeScreen(){
return(
<ImageBackground
style={styles.background}
source={require('../assets/welcome-bg.png')}>
<View style={styles.logoBox}>
<Image style={styles.logo} source={require('../assets/logo.png')} />
<Text style={styles.tagline}>পছন্দের ঘর এখন এখানেই...</Text>
</View>
<View style={styles.loginBtn}></View>
<View style={styles.signupBtn}></View>
</ImageBackground>
)
}
//
const styles = StyleSheet.create({
background: {
flex: 1,
alignItems: "center",
justifyContent: "flex-end"
},
logoBox: {
position: "absolute",
top: 80,
alignItems: "center"
},
logo: {
width: 240,
height: 120,
},
tagline:{
marginTop: 10,
fontSize: 19,
fontWeight: "700",
color: colors.sub,
fontFamily: 'Shamim-Bn',
},
loginBtn:{
backgroundColor: colors.main,
width: "100%",
height: 70
},
signupBtn:{
backgroundColor: colors.sub,
width: "100%",
height: 70
}
});
export default WelcomeScreen;
Edit:
More preciously, The view only declared in to App.js gets the custom font. The view like WelcomeScreen.js, I import to App.js doesn't get custom fonts.
Please help.
I've solve this problem. If you set fontWeight property along with custom font in the styles declaration, the <Text> components rendered the default fonts available on the device. The only way you can use different variants of the fonts by importing and declaring the font variants like this:
let [fontsLoaded] = useFonts({
"Shamim-Bn": require(
'./app/assets/Shamim-Font-Bn.ttf'
),
"Poppins-Light": Poppins_300Light,
"Poppins-Regular": Poppins_400Regular,
"Poppins-Regular-Italic": Poppins_400Regular_Italic,
"Poppins-Medium": Poppins_500Medium,
"Poppins-Bold": Poppins_700Bold,
"Poppins-Black": Poppins_900Black,
});
Later set the fonFamily property to Poppins-Regular or Poppins-Bold.
Again, don't use the fontWeight property with it.
I'm trying to implement a Drawer Navigator in my application but it returns this error.
I'm using React-Native and react-navigation and android 9.0 for emulator
Error Message:
App return
import React, { Component } from "react";
import {
Platform,
StyleSheet,
Text,
View,
ScroollView,
Dimensions,
Image
} from "react-native";
import {
createDrawerNavigator,
createAppContainer,
DrawerItems,
SafeAreaView[enter image description here][3]
} from "react-navigation";
import LoginScreen from "./Screens/Login/LoginScreen";
import HomeScreen from "./Screens/Home/HomeScreen";
type Props = {};
export default class App extends Component<Props> {
render() {
return <Apps />;
}
}
const CustomDrawerComponent = props => (
<SafeAreaView style={{ flex: 1 }}>
<View
style={{
height: 150,
backgroundColor: "white",
alignItems: "center",
justifyContent: "center"
}}
>
<Image
source={require("./images/perfil.png")}
style={{ height: 120, width: 120, borderRadius: 60 }}
/>
</View>
<ScroollView>
<DrawerItems {...props} />
</ScroollView>
</SafeAreaView>
);
const AppDrawerNavigator = createDrawerNavigator(
{
Home: HomeScreen,
Settings: LoginScreen
},
{
contentComponent: CustomDrawerComponent
}
);
const Apps = createAppContainer(AppDrawerNavigator);
const styles = StyleSheet.create({});
I expected that application to start with the side menu working.
THe problem is in my code. It's ScrollView not ScroollView, my bad xd
I'm teaching myself React Native and as of now, I've ran into a minor problem.
I want <KeyboardAvoidingView/> to push the 2 input boxes up so that the user can see what they're typing but my code isn't doing that. It isn't even showing what user is typing. The user must press Next on the keyboard they can see what they typed. Also, what I press Next, it doesn't go to the next input box.
Here's App.js:
import React, {Component} from 'react';
import {View, StyleSheet} from 'react-native';
import BackGround from './components/BackGround';
export default class App extends Component {
render() {
return(
<View style={styles.back}>
<BackGround/>
</View>
);
}
}
const styles = StyleSheet.create({
back: {
flex: 1
}
});
Here's Login.js:
import React, {Component} from 'react';
import {StyleSheet, TextInput, View, Text, TouchableOpacity, KeyboardAvoidingView} from 'react-native';
class Login extends Component {
render() {
return(
<KeyboardAvoidingView behavior={"padding"} style={styles.container}>
<View>
<TextInput
style={styles.input}
returnKeyType={"next"}
keyboardType={"email-address"}
autoCorrect={false}
placeholder={"Email"}
/>
<TextInput
style={styles.input}
returnKeyType={"go"}
placeholder={"Password"}
secureTextEntry
/>
<TouchableOpacity>
<Text style={styles.loginAndCA}>Login</Text>
</TouchableOpacity>
<TouchableOpacity>
<Text style={styles.loginAndCA}>Create Account</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
);
}
}
const styles = StyleSheet.create({
container: {
padding: 20
},
input: {
backgroundColor: '#DAE5FF',
// paddingBottom: 20,
padding: 20,
paddingHorizontal: 15,
marginBottom: 10,
borderRadius: 15,
},
loginAndCA: {
fontSize: 40,
textAlign: 'center',
color: 'white',
fontFamily: 'Bodoni 72 Smallcaps',
paddingHorizontal: 10
}
});
export default Login;
Here's BackGround.js:
import React, {Component} from 'react';
import {StyleSheet, Image, View, Text} from 'react-native';
import Login from './Login';
class BackGround extends Component {
render() {
return(
<View style={styles.first}>
<Image style={styles.container} source={require('../pictures/smoke.jpg')}>
<Login/>
</Image>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
width: null,
height: null,
backgroundColor: 'rgba(0,0,0,0)',
},
first: {
flex: 1
},
second: {
paddingTop: 290 // Moves both <TextInput> boxes down.
},
});
export default BackGround;
I am testing my code and got an error. I need to press a button and go to the next page.
First, I created Safay.js and wrote code to set the initial route in this page. Then I created buttonsubmit.js so that when I press the button it will go to the next page, route.js. However, when testing I get an error. I just rechecked my code, which I may have typed wrong, or maybe it's something I don't know.
This is my error:
got error: undefined is not an object (evaluating 'this.props.navigator.push')
error in file ButtonSubmit.js :22
This is my code:
Safay.js
import index from './index.js';
import React, { Component, PropTypes } from 'react';
import {Navigator, StatusBar, TouchableHighlight,
AppRegistry, StyleSheet, Text, View} from 'react-native';
import Route from './Route.js';
import Signup from './Signup.js';
import ButtonSubmit from './ButtonSubmit.js';
export default class Safay extends Component {
renderScene(route, navigator){
if(route.name == 'Safay'){
return <Safay navigator={navigator}/>
}
if(route.name == 'Route'){
return <Route navigator={navigator}/>
}
}
render() {
return (
<View style={styles.container}>
{<navigator
initialRoute={{name: 'Safay'}}
renderScene={this.renderScene.bind(this)}
/>}
</View>
);
}
}
ButtonSubmit.js
import React, { Component, PropTypes } from 'react';
import Dimensions from 'Dimensions';
import {
StyleSheet,
TouchableOpacity,
Text,
Animated,
Easing,
Image,
Alert,
View,
} from 'react-native';
const DEVICE_WIDTH = Dimensions.get('window').width;
const DEVICE_HEIGHT = Dimensions.get('window').height;
const MARGIN = 40;
export default class ButtonSubmit extends Component {
navigate(routeName){
this.props.navigator.push({
name: routeName
})
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={this.navigate.bind(this, 'Route')} style={styles.button}>
<Text style={styles.text}>LOGIN</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
top: -20,
alignItems: 'center',
justifyContent: 'flex-start',
},
button: {
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#ff8011',
height: MARGIN,
borderRadius: 20,
zIndex: 100,
width: DEVICE_WIDTH - 40,
},
circle: {
height: MARGIN,
width: MARGIN,
marginTop: -MARGIN,
borderWidth: 1,
borderColor: '#ff8011',
borderRadius: 100,
alignSelf: 'center',
zIndex: 99,
backgroundColor: '#ff8011',
},
text: {
color: 'white',
fontWeight: '700',
fontSize: 21,
backgroundColor: 'transparent',
},
});
Route.js
import React, { Component } from 'react';
import {Navigator, StatusBar, TouchableHighlight,
AppRegistry, StyleSheet, Text, View} from 'react-native';
export default class Route extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#05121F',
},
});
Thank you for your support.
You were wrong in button class because you did not pass the instance of the navigator to the button class and you are using navigator.
If i was you i would have removed onpress from the button for a while then i would have used button in the class Safay. like this:
<View style={styles.container}>
<ButtonSubmit navigator={navigator} />
<navigator
initialRoute={{name: 'Safay'}}
renderScene={this.renderScene.bind(this)}
/>
</View>
After all the above process i would have include onPress again.
Cheers :)