We Keep Coding

Horizontal margin too big on newly created Expo app

I just created a React Native app with Expo using expo init. Everything went fine. Then I went on and created a Home screen like so:
import React from 'react';
import { View, TextInput } from 'react-native';
export default class HomeScreen extends React.Component {
state = {
searchText: ""
}
render() {
return (
<View
style={{
flex: 1,
backgroundColor: 'white'
}}
>
<TextInput
placeholder="Search..."
value={this.state.searchText}
onChangeText={ (searchText) => this.setState({ searchText }) }
/>
</View>
);
}
}
I added it to my AppNavigator...
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from '../screens/HomeScreen';
const AppNavigator = createStackNavigator({
Home: HomeScreen
});
export default createAppContainer(AppNavigator);
...which I in turn added to App.js:
import React from 'react';
import { StyleSheet, View, StatusBar, Platform } from 'react-native';
import { AppLoading } from 'expo';
import AppNavigator from './navigation/AppNavigator';
export default class App extends React.Component {
state = {
isLoadingComplete: false
}
render() {
if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
return (
<AppLoading
startAsync={this._loadResourcesAsync}
onError={this._handleLoadingError}
onFinish={this._handleFinishLoading}
/>
);
}
return (
<View style={styles.container}>
{Platform.OS === 'ios' && <StatusBar barStyle="default" />}
<AppNavigator />
</View>
);
}
_loadResourcesAsync = async () => { };
_handleLoadingError = error => {
console.warn(error);
};
_handleFinishLoading = () => {
this.setState({ isLoadingComplete: true });
};
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Now, my problem is that my app looks like this:
As you can see, the horizontal margins are way too big, but I never set them to be like that. What am I doing wrong? I want the TextInput to stretch across the full screen.

Your HomeScreen Component will be as wide as its contents. You did not specify the width of the main View, therefore, it adjusted itself to be as wide the components inside. What you can do to resolve this issue is that you must provide width property in your Top level View's style.
And in order to get the Width of the screen, you can import Dimensions from react-native and use that like below:
const windowWidth = Dimensions.get('window').width;
and finally, you can assign the windowWidth to your view like so:
style={{flex:1, width: windowWidth, backgroundColor: 'white'}}

Could not find "store" in the context of connect

import React from 'react';
import { View, TouchableOpacity, StyleSheet, Button, Text, NativeModules, Image } from 'react-native';
import { connect } from 'react-redux'
import { Icon } from 'native-base';
const ShoppingCartIcon = (props) => (
<View>
<View style={{
position: 'absolute', height: 30, width: 30,
borderRadius: 15, backgroundColor: 'rgba(95,197,123,0.8)', right: 45,
bottom: 15, alignItems: 'center', justifyContent: 'center', zIndex: 2000
}}>
<Text stye={{ color: 'white' }}> {props.cartItems.length} </Text>
</View>
<Icon name="cart" ></Icon>
<Button style={styles.but}
title="Add"
onPress={() => {
this.props.navigation.navigate('ShopScreen');
this.props.navigation.closeDrawer();
}}
/>
</View>
)
const mapStateToProps = (state) => {
return {
cartItems: state
}
}
export default connect(mapStateToProps)(ShoppingCartIcon);
const styles = StyleSheet.create({
but: {
justifyContent: 'center',
alignItems: 'center',
fontSize: 20,
//justifyContent: 'flex-end',
//textAlign: 'center',
//flexDirection:'column',
}
})
I am trying to use redux but I get this error: Could not find "store" in the context of "Connect(ShoppingCartIcon)". Either wrap the root component in a , or pass a custom React context provider to and the corresponding React context consumer to Connect(ShoppingCartIcon) in connect options.
It seems that the problem is from the fact that I wrap my drawer container screen in a Provider but I don't know how to fix it.
Thanks for your help
import React, { Component } from 'react';
import { View, Text, Button, StyleSheet, Image, Platform, TextInput, ScrollView, Title } from 'react-native';
import DrawSt from './App.js'
import { Provider } from 'react-redux'
import store from './store'
//import { NavigationContainer } from '#react-navigation/native'
export default class Start extends React.Component {
render() {
return (
<Provider store={store}>
<DrawSt />
</Provider>
)
}
}
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import {Icon} from 'react-native-elements';
import {Platform, TouchableOpacity, View, Text} from 'react-native';
import DrawerContainer from './src/screens/DrawerContainer.js'
import { createDrawerNavigator } from 'react-navigation-drawer';
const RootStack = createStackNavigator({
HomeScreen: {
screen:Home,
navigationOptions:{
headerTitle:"Home",
headerTitleStyle:{
alignSelf:'center',
textAlign:'center',
flex:2,
padding: 116.5,
textAlignVertical:'center',
justifyContent:'center',
marginBottom:Platform.OS==='ios'?30:null,
},
}
},
HomeLoginScreen: {
screen: HomeLogin,
navigationOptions: ({navigation})=>({
headerRight: (
<TouchableOpacity onPress={() => navigation.toggleDrawer()}>
<Icon name="menu" size={30} />
</TouchableOpacity>
),
headerTitleStyle:{
alignSelf:'center',
textAlign:'center',
flex:2,
padding: 70,
textAlignVertical:'center',
justifyContent:'center',
marginBottom:Platform.OS==='ios'?30:null,
},
})
},
MilkScreen:{
screen: milk,
navigationOptions:{
headerRight: (
<TouchableOpacity onPress={() => navigation.toggleDrawer()}>
<Icon name="menu" size={30} />
</TouchableOpacity>
),
headerTitleStyle:{
alignSelf:'center',
textAlign:'center',
flex:2,
padding: 116.5,
textAlignVertical:'center',
justifyContent:'center',
marginBottom:Platform.OS==='ios'?30:null,
},
}
},
DrinkScreen:{
screen: drinks,
navigationOptions:{
headerTitleStyle:{
alignSelf:'center',
textAlign:'center',
flex:2,
padding: 70,
textAlignVertical:'center',
justifyContent:'center',
marginBottom:Platform.OS==='ios'?30:null,
},
}
},
//and others
},
{
initialRouteName: 'HomeScreen',
},
);
const DrawerStack = createDrawerNavigator(
{
Main:RootStack
},
{
drawerPosition: 'left',
initialRouteName: 'Main',
drawerWidth: 250,
contentComponent: DrawerContainer
}
)
DrawSt = createAppContainer(DrawerStack)
export default DrawSt;
Could not find "store" in the context of "Connect(ShoppingCartIcon)". Either wrap the root component in a , or pass a custom React context provider to and the corresponding React context consumer to Connect(ShoppingCartIcon) in connect options.

you should provide to <Provider store={store}> store like that
import { createStore } from "redux";
import reducer from '.store/reducer'
const store = createStore(reducer);

Can't seem to understand why my background image carousel is not working?

Don't understand why my Background Carousel is not working. I'm trying to place a static logo and some other components above the background carousel on my app, but I believe I have a few errors, just don't know what exactly. At the moment getting "React.createElement: type is invalid"
Any help would be appreciated.
This is my BackgroundCarousel.js file
import React from 'react';
import {StyleSheet, View, ScrollView, Dimensions, Image} from 'react-native'
const DEVICE_WIDTH = Dimensions.get('window').width;
class BackgroundCarousel extends React.Component {
scrollRef = React.createRef();
constructor(props) {
super(props);
this.state = {
selectedIndex: 0
}
}
render() {
const {images} = this.props
const {selectedIndex} = this.state
return (
<View style= {{height: "100%", width: "100%"}}>
<ScrollView horizontal pagingEnabled>
{images.map(image => (
<Image
key={image}
source={{uri: image}}
style={styles.backgroundImage}
/>
))}
</ScrollView>
</View>
)
}
}
const styles = StyleSheet.create ({
backgroundImage: {
height: "100%",
width: DEVICE_WIDTH
}
});
export { BackgroundCarousel}
This is my App.js file
import { StyleSheet, Text, View, ImageBackground,
Image, TextInput, Dimensions, Platform } from 'react-native';
import { Button } from './components/button.js'
import { BackgroundCarousel } from './components/BackgroundCarousel.js'
const images = [
"./images/basketball.jpg",
"./images/network.jpg",
"./images/memories.jpg",
"./images/photographer.jpg"
];
/* Logo for login page */
import logo from './Icon/iconpersons.png'
const { width: WIDTH } = Dimensions.get('window')
export default function App() {
return (
<View style= {styles.carouselContainer}>
<BackgroundCarousel images={images}>
<View style={styles.logoContainer}>
<Image source={logo} style={styles.logo}/>
<Text style={styles.logoText}>Hello World</Text>
</View>
<View>
<TextInput
style={styles.input}
placeholder={'Username'}
placeholderTextColor={'rgba(255, 255, 255, 0.7)'}
underlineColorAndroid= 'transparent'
/>
</View>
<View>
<Button>
Let's Get Started
</Button>
</View>
</BackgroundCarousel>
</View>
);
}

it's maybe because you are passing image source props as source={{uri: image}} whereas you are passing locally store images in props. what you should do is.
{images.map(image => (
<Image
key={image}
source={require(image)}
style={styles.backgroundImage}
/>
))}
or you can just edit your images array as:
const images = [
require("./images/basketball.jpg"),
require("./images/network.jpg"),
require("./images/memories.jpg"),
require("./images/photographer.jpg)"
];

you have some small problems. your images are static so you only should use require not uri and that solve your problem. this code bellow solve your problems.
App.js
import React from 'react';
import {
StyleSheet, Text, View, ImageBackground,
Image, TextInput, Dimensions, Platform
} from 'react-native';
import BackgroundCarousel from './BackgroundCarousel.js'
const images = [
require("./images/basketball.jpg"),
require("./images/network.jpg"),
require("./images/memories.jpg"),
require("./images/photographer.jpg)"
];
const { width: WIDTH } = Dimensions.get('window')
export default function App() {
return (
<View style={styles.carouselContainer}>
<BackgroundCarousel images={images} />
</View>
);
}
const styles = StyleSheet.create({
carouselContainer: {
height: "100%",
width: "100%",
backgroundColor: '#fff'
}
});
BackgroundCarousel.js
import React from 'react';
import {StyleSheet, View, ScrollView, Dimensions, Image} from 'react-native'
const DEVICE_WIDTH = Dimensions.get('window').width;
class BackgroundCarousel extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedIndex: 0
}
scrollRef = React.createRef();
}
render() {
const {images} = this.props
const {selectedIndex} = this.state
return (
<View style= {{height: "100%", width: "100%"}}>
{this.props.children}
<ScrollView horizontal pagingEnabled>
{images.map(image => (
<Image
key={image}
source={image}
style={styles.backgroundImage}
/>
))}
</ScrollView>
</View>
)
}
}
const styles = StyleSheet.create ({
backgroundImage: {
height: '100%',
width: DEVICE_WIDTH
}
});
export default BackgroundCarousel;

Problems in DrawerNavigator in React-Native with react-navigation

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

Error while updating property 'accessibilityLabel' of a view managed by: RCTView TypeError: expected dynamic type `string', but had type `object'

I want to create some screen with stack and tabs navigator, but it seems not worked, it get error message like this error on virtual device...
Is this because the navigation or what?
This is my code
ConfirmActivation.js
import React, { Component } from 'react';
import { StyleSheet, Image } from 'react-native';
import { Container, Header, Content, Left, Right, Body, Text, StyleProvider,
Form, Item, Input, Label, Button, View } from 'native-base';
import { StackNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/FontAwesome';
import getTheme from '../../../native-base-theme/components';
import material from '../../../native-base-theme/variables/material';
import Index from '../tabs/Index';
export default class sharpcs extends React.Component {
static navigationOptions = {
title: <Image source={require('../../assets/img/sharp_logo.png')} style={{width: 200, height: 50}} />,
header: null
}
render() {
return (
<AppNavigation/>
);
}
}
class ConfirmActivation extends Component{
static navigationOptions = {
title: <Image source={require('../../assets/img/sharp_logo.png')} style={{width: 200, height: 50}} />,
header: null
}
render() {
const { navigate } = this.props.navigation;
return (
<StyleProvider style={getTheme(material)}>
<Container style={styles.container} >
<Form style={styles.form} >
<Item floatingLabel>
<Label>Masukkan kode verifikasi</Label>
<Input keyboardType = 'numeric' maxLength = {13} />
</Item>
<View style={styles.buttonContainer} >
<Button
onPress={() =>
navigate('MainScreen')
} success style={{width: 125}} >
<Label style={{color: '#FFF', marginLeft: 24}} >
Lanjut
</Label>
</Button>
</View>
</Form>
</Container>
</StyleProvider>
);
}
}
const App = StackNavigator({
ThisScreen: { screen: ConfirmActivation },
MainScreen: { screen: Index }
});
const AppNavigation = () => (
<App />
);
const styles = StyleSheet.create({
form: {
flex: 2,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
},
container: {
padding: 20
},
buttonContainer: {
marginTop: 20,
flexDirection: 'row',
alignSelf: 'flex-end'
}
});
Index.js
import React, { Component } from 'react';
export default class Index extends React.Component {
render() {
return null;
}
}

The cause of the error is the title in the navigationOptions in sharpcs class. It expects a string. You had provided it an image component. Although the image appears, but this error appears when navigating. So use instead of title, headerTitle