Hey guys I am trying to make an app using AWS Amplify and React Native. I want to just add a background image to my app and for that small purpose, I don't want to create an entirely custom component to display for the Sign In Screen. Here is my code.
import React, { useEffect } from 'react';
import { Text, View, StyleSheet, StatusBar, ImageBackground, Image } from 'react-native';
import SplashScreen from 'react-native-splash-screen';
import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
import { Authenticator, AmplifyTheme } from 'aws-amplify-react-native';
Amplify.configure(awsconfig);
console.disableYellowBox=true;
const App = function() {
useEffect(() => {
SplashScreen.hide();
}, []);
return(
<View style={styles.container}>
<StatusBar
barStyle = 'light-content'
backgroundColor='black'
/>
<Authenticator usernameAttributes="email" >
</Authenticator>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black'
}
});
export default App;
I know ImageBackground should do the job but I don't know how to integrate the Amplify sign in with it.
Thanks in advance.
Related
I have created a React Native app with React Native CLI.
The App.tsx has the following content:
import React from "react";
import {
StyleSheet,
Text,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
const App = () => {
return (
<SafeAreaView>
<Text>Hello React</Text>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
});
export default App;
The app is very straightforward, it shows only Hello React.
What does disturb me is the gray bulk on the top:
and I do not know, where it comes from.
My virtual device:
React Native version 0.65.
Could you please tell me, where the gray bulk comes from?
The repository is hosted on https://github.com/softshipper/GrayBulk.
Update
I have changed the App component to:
import React from "react";
import {
StyleSheet,
View,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
const App = () => {
return (
<SafeAreaView style={{ flex: 1, backgroundColor: "red" }}>
<View style={{ flex: 1, backgroundColor: "blue" }} />
</SafeAreaView>
)
}
const styles = StyleSheet.create({
});
export default App;
and the gray bulk still appears:
Change the SafeAreaView and change it to View to remove the boundaries and then give the component flex: 1, then paddingTop: 25 and backgroundColor: white.
I have Lottie React Native working perfectly in my project except for one minor issue. The colour of the animation is not appearing and I cannot seem to identify what the cause is here. The component is very simple
import React from 'react';
import {StyleSheet, View, Text} from 'react-native';
const styles = StyleSheet.create({
text: {
fontFamily: 'Roboto-Bold',
fontSize: 18,
},
});
export default (props) => {
return (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text style={styles.text}>Login Screen</Text>
</View>
);
};
Can see here in this that the background of the animation is white when it should have a background colour set: https://lottiefiles.com/7825-money-transfer. Any thoughts/guidance is appreciated.
Here is the working example
Snack link: https://snack.expo.io/#msbot01/forlorn-raspberries
import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import LottieView from 'lottie-react-native';
export default class NoNetwork extends Component {
render() {
return (
<View style={{ flex: 1, backgroundColor:'green' }}>
<LottieView source={require('./pay.json')} autoPlay loop />
</View>
);
}
}
const styles = StyleSheet.create({});
At the start of my application, there is two tabs at the bottom of the screen (these tabs came in the template I downloaded from Expo for react js). I made a new screen, called homepage, and I want to now replicate those same tabs at the bottom, but I can't figure out how. I tried using a stack navigator but it did not work.
I want it to look like this
Here is my code for homescreen
import * as React from 'react';
import { StyleSheet, Button, TextInput } from 'react-native';
import EditScreenInfo from '../components/EditScreenInfo';
import { Text, View } from '../components/Themed';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import FAQ_Screen from './FAQ_Screen';
import NewsScreen from './NewsScreen';
import { createStackNavigator } from '#react-navigation/stack';
import BottomTabNavigator from '../navigation/BottomTabNavigator';
import NotFoundScreen from './NotFoundScreen';
const Stack = createStackNavigator();
export default function HomeScreen() {
return (
<View style={styles.container}>
<Text> Home </Text>
<select>
<option> Station 1 </option>
<option> Staton 2 </option>
</select>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
title: {
fontSize: 20,
fontWeight: 'bold',
},
separator: {
marginVertical: 30,
height: 1,
width: '80%',
},
});
You should declare tabs inside Tab.Navigator.
These screens can be separate .tsx or js files. I did using js, to be able to show using Expo. However, ts/js doesn't change the behavior.
I did a working example:
https://snack.expo.io/#mayconjcm/tab-navigation-%7C-react-navigation
You can also see the code here:
Home:
import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import HomeTab from './Tab1';
import SettingsTab from './Tab2';
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeTab} />
<Tab.Screen name="Settings" component={SettingsTab} />
</Tab.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<MyTabs />
</NavigationContainer>
);
}
Tab1:
import * as React from 'react';
import { Text, View } from 'react-native';
const HomeTab = () => {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
</View>
);
}
export default HomeTab;
Tab2:
import * as React from 'react';
import { Text, View } from 'react-native';
const SettingsTab = () => {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
export default SettingsTab;
I am trying to learn React Native and got stuck with React Navigation. I have installed NPM and expo CLI. Also followed the react documentation to create the React Project. But when I tried to create navigation between screens got this error on expo mobile client -
I am not sure what I am doing wrong. I searched for hours on StackOverflow but none of the solutions worked. I am seeking a bit guidance from experts. Below I am pasting the source -
======
App.js
======
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { createStackNavigator } from 'react-navigation';
import HomeScreen from './screen/HomeScreen';
import DetailsScreen from './screen/DetailsScreen';
const AppStackNavigator = createStackNavigator({
Home: {
screen: HomeScreen
},
Details: {
screen: DetailsScreen
},
});
export default class App extends React.Component {
render() {
return (<AppStackNavigator />);
}
}
=============
HomeScreen.js
=============
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
/* StyleSheet */
const styles = StyleSheet.create({
mainContainer: {flex: 1, flexDirection: 'column', backgroundColor: '#efefef', alignItems: 'center', justifyContent: 'center'},
});
class HomeScreen extends React.Component {
render() {
return (
<View style={styles.mainContainer}>
<Text>Home Screen</Text>
</View>
);
}
}
export default HomeScreen;
================
DelaitsScreen.js
================
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
/* StyleSheet */
const styles = StyleSheet.create({
mainContainer: {flex: 1, flexDirection: 'column', backgroundColor: '#efefef', alignItems: 'center', justifyContent: 'center'},
});
class DetailsScreen extends React.Component {
render() {
return (
<View style={styles.mainContainer}>
<Text>Details Screen</Text>
</View>
);
}
}
export default DetailsScreen;
To The Experts, I will be forever grateful if anyone can nudge me to the right direction. :)
Thank You.
Your app is crashing because it seems like you are using React Navigation V3 with code that is for V2. V3 requires a container.
Either downgrade to V2 or add the container.
I am an Android developer who works with Android Studio most.
I started with my first react-native project for iOS and I want to know how is it possible to have one screen with a button that when the user clicks takes him to another screen (or activity in an android way) which has a hello message.
I would be really obliged to anyone that can help because I am really new to React and React-Native.
I have tried the following code but I get the following error.
My code is the following:
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, Button } from 'react-native';
import { createStackNavigator } from 'react-navigation';
import Settings from './Settings';
import Home from './Home';
const AppNavigator = createStackNavigator({
HomeScreen: { screen: Home },
SettingScreen: { screen: Settings },
});
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Image style={styles.image} source={require('./assets/adc.png')} />
<Text style={styles.adc}>Aratos Disaster Control</Text>
<Button title="Settings" onPress = {() => this.props.navigation.navigate('SettingScreen')} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
adc:{
fontWeight: 'bold',
marginTop: 20
},
image:{
width: 80,
height: 100
}
});
// Home.js
import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
export class Home extends Component {
render() {
return (
<View>
<Text>This is the home screen</Text>
<Button title="Settings" onPress={() => this.props.navigation.navigate('SettingScreen')} />
</View>
)
}
}
export default Home
// Settings.js
import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
export class Settings extends Component {
render() {
return (
<View>
<Text>This is the Settings screen</Text>
</View>
)
}
};
export default Settings;
For navigate between pages, you can use React Navigation or react-native-router-flux or other packages. You have to define the structure of your navigation and then navigate to each page using this packages. Read guides for more information.