React-Native : ScrollView not showing the full content - javascript

I'm building an app with React-Native and for my Home Page im using the ScrollView but it doesn't show the full content. I have e header on the top so that may be blocking the full content or i don't know.
The code :
import React from "react";
import { View, StyleSheet, Text, ScrollView } from "react-native";
import Content from "../components/Content/content";
import Header from "../components/Header/header";
import Carousel1 from "../components/Carousel/index";
import Buttons from "../components/Buttons/buttons";
export default class HomeScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
let drawerLabel = "Home";
return { drawerLabel };
};
render() {
return (
<View style={styles.container}>
<Header {...this.props} />
<ScrollView style={{flex:1}}>
<Carousel1 />
<Content />
<Buttons />
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#f9f9f9"
}
});
Any idea how to fix this?

Try it with react native Flatlist instead of ScrollView:
React-native Flatlist

Try using contentContainerStyle instead of style with ScrollView.
Since I don't have access to your Carousel1 , Content, and Buttons component to give you a certain answer, I suggest you try the following:
render() {
return (
<View style={styles.container}>
<Header {...this.props} />
<ScrollView contentContainerStyle={{ flexDirection:"column" }}>
<Carousel1 />
<Content />
<Buttons />
</ScrollView>
</View>
);
}
}
Report back with your results.

Remove style={{flex:1}} from ScrollView and see

Related

TypeError: undefined is not an object (evaluating '_this.props.navigation') in React Native

I'm trying to work with React Navigation using an external button component, to make styling it easier, but it gives me the TypeError: undefined is not an object (evaluating '_this.props.navigation') error when I try to pass the navigation. If I create the button on my home screen it works fine, but that clutters up my HomeScreen's stylesheet, and means I have to repeat code when I use the button elsewhere.
I have the stack navigation set up in my App.js, and again, it works fine when I'm not trying to pass the navigation as a prop.
Here's HomeScreen.js
import React from "react";
import {
ScrollView,
StyleSheet,
Text,
View,
AsyncStorage,
} from 'react-native';
import Heading from '../heading';
import Input from '../Input';
import Button from "../Button";
export const Home = ({navigation}) => (
<View style={styles.container}>
<ScrollView style={styles.content}>
<Heading />
</ScrollView>
<Button/>
</View>
)
And here's my Button.js
/* eslint-disable prettier/prettier */
import React from 'react';
import {
StyleSheet,
Text,
View,
TouchableHighlight
} from 'react-native';
import { useNavigation } from '#react-navigation/native';
function Button(){
const navigation = useNavigation()
return(
<View style={styles.buttonContainer}>
<TouchableHighlight
underlayColor='rgba(175, 47, 47, .75)'
activeOpacity={1.0}
style={styles.button}
onPress={() => {
navigation.navigate("New Medication");
}}>
<Text style={styles.submit}>
+
</Text>
</TouchableHighlight>
</View>
)
}
As far as I understand it, this should work just fine, so why is it saying that it's being passed as undefined?
UPDATE: Thanks to some suggestions I now have it to where it doesn't give an error, just does nothing.
Here's my App.js, with my navigation
const Stack = createStackNavigator();
function MyStack() {
return (
<Stack.Navigator
screenOptions={{
headerShown: false
}}>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="NewMedication" component={newMedScreen} />
</Stack.Navigator>
);
}
class App extends Component{
render(){
return(
<NavigationContainer>
<MyStack />
</NavigationContainer>
);
}
}
export default App;
I recommend you to create a const with screen name and reuse it everywhere to avoid such problem. You nave stack like this <Stack.Screen name="NewMedication" component={newMedScreen} /> , but try to navigate
navigation.navigate("New Medication").Of course this screen do not exist
const NEW_MEDICATION_SCREEN = 'NewMedication'
<Stack.Screen name={NEW_MEDICATION_SCREEN} component={newMedScreen} />
.....
onPress={() => navigation.navigate(NEW_MEDICATION_SCREEN)}>
and for make Button reusable use it like this
function Button({onPress}){
return(
<View style={styles.buttonContainer}>
<TouchableHighlight
underlayColor='rgba(175, 47, 47, .75)'
activeOpacity={1.0}
style={styles.button}
onPress={onPress}>
<Text style={styles.submit}>
+
</Text>
</TouchableHighlight>
</View>
)}
export const Home = ({navigation}) => (
<View style={styles.container}>
<ScrollView style={styles.content}>
<Heading />
</ScrollView>
<Button onPress={() => navigation.navigate(NEW_MEDICATION_SCREEN)}/>
</View>

How can I convert stateless function to class component in react native

I am new in react native, I have been looking for how to convert this function to a class component in react native. Please I need help to convert the code below to react component.
import React from 'react';
import { View, Image, ScrollView } from 'react-native';
import styles from './styles';
export default ({captures=[]}) => (
<ScrollView
horizontal={true}
style={[styles.bottomToolbar, styles.galleryContainer]}
>
{captures.map(({ uri }) => (
<View style={styles.galleryImageContainer} key={uri}>
<Image source={{ uri }} style={styles.galleryImage} />
</View>
))}
</ScrollView>
);
To turn this into a class component, just move the code into the class component's render method, and change references to props with references to this.props. For this component, no other changes are needed.
export default class Example extends React.Component {
render () {
const { captures = [] } = this.props;
return (
<ScrollView
horizontal={true}
style={[styles.bottomToolbar, styles.galleryContainer]}
>
{captures.map(({ uri }) => (
<View style={styles.galleryImageContainer} key={uri}>
<Image source={{ uri }} style={styles.galleryImage} />
</View>
))}
</ScrollView>
)
}
}

How to use HoC with React Native

I have an listing app where users can add items for multiple categories, when they want to add new record, there are 3 related screens with this particular feature. All of those screens have <Header/> component, so i thought HoC would be nice here so that i can reuse it across 3 screens.
However, i could not accomplish it.
Here is what i tried so far:
This is my HoC class
import React, { Component } from 'react';
import { View, StyleSheet, Text, StatusBar } from 'react-native';
import Header from '../components/Header';
const NewAd = (WrappedComponent) => {
class NewAdHoc extends Component {
handleBackPress = () => {
this.props.navigation.navigate('Home');
StatusBar.setBarStyle('dark-content', true);
}
render() {
const {contentText, children} = this.props
return (
<View style={styles.container}>
<Header
headerText={'Yeni ilan ekle'}
onPress={this.handleBackPress}
/>
<View style={styles.contentContainer}>
<Text style={styles.contentHeader}>{contentText}</Text>
<WrappedComponent/>
</View>
</View>
);
}
}
return NewAdHoc;
}
this is my screen:
class NewAdScreen extends Component {
render() {
const Content = () => {
return (
<View style={styles.flatListContainer}>
<ListViewItem />
</View>
);
}
return (
NewAdHoc(Content)
)
}
}
after that i am getting error
TypeError: (0 , _NewAdHoc.NewAdHoc) is not a function(…)
and i have no idea how can i fix it because this is my first time using hocs on a react-native app. I have looked why this error is popping and they suggest import components in this way:
import {NewAdHoc} from '../hocs/NewAdHoc';
but even this is not solved it.
any help will be appreciated, thanks.
The main purpose of a HOC is to encapsulate and reuse stateful logic across components. Since you are just reusing some jsx and injecting nothing in WrappedComponent you should be using a regular component here:
const NewAd = ({ contentText, children }) => {
handleBackPress = () => {
this.props.navigation.navigate('Home');
StatusBar.setBarStyle('dark-content', true);
}
return (
<View style={styles.container}>
<Header
headerText={'Yeni ilan ekle'}
onPress={this.handleBackPress}
/>
<View style={styles.contentContainer}>
<Text style={styles.contentHeader}>{contentText}</Text>
{children}
</View>
</View>
);
}
And use it like this
return(
<>
<NewAd>
<Screen1 />
</NewAd>
<NewAd>
<Screen2 />
</NewAd>
<NewAd>
<Screen3 />
</NewAd>
</>
)

Screen Navigation doesnt work with Params React Navigation

I have this coding in my inside page of my app
screeen 3 from where i want to click on wifi list item which should then open the Wifi screen
Screen 3 is a screen from Tab navigator which is activated after the auth layout with stack navigatoin
my coding is as below
screenthree.js
import React, { Component } from "react";
import {
View,
StyleSheet
} from "react-native";
import { Container, Header, Content, List, ListItem, Text, Icon, Left, Body, Right, Switch } from 'native-base';
class ScreenThree extends Component{
render(){
return (
<Container>
<Content>
<List>
<ListItem icon onPress={()=>this.props.navigation.navigate('WifiScreen', {
itemId: 86,
otherParam: 'anything you want here',
})}>
<Left>
<Icon name="wifi" />
</Left>
<Body>
<Text>Wi-Fi</Text>
</Body>
<Right>
<Text>GeekyAnts</Text>
<Icon name="arrow-forward" />
</Right>
</ListItem>
</List>
</Content>
</Container>
);
}
}
export default ScreenThree;
const styles = StyleSheet.create({
container:{
flex:1,
alignItems:'center',
justifyContent:'center'
}
});
and coding for the wifi screen is as below
import React, { Component } from "react";
import {
View,
Text,
StyleSheet
} from "react-native";
// const itemId = this.props.navigation.getParam('itemId', 'NO-ID');
// const otherParam = this.props.navigation.getParam('otherParam', 'some default value');
class WifiScreen extends Component{
render(){
return (
<View style={styles.container}>
<Text>WifiScreen</Text>
{/* <Text>itemId: {JSON.stringify(itemId)}</Text>
<Text>otherParam: {JSON.stringify(otherParam)}</Text> */}
</View>
);
}
}
export default WifiScreen;
const styles = StyleSheet.create({
container:{
flex:1,
alignItems:'center',
justifyContent:'center'
}
});
Now everything is working fine and wifi screen is opening when I click on wifi list item unless I uncomment the param coding from wifi.js
after uncommenting that I am getting undefined is not an object (evaluating 'this.props.navigation.navigate') error
dependencies :
"expo": "^28.0.0",
"native-base": "^2.6.1",
"react": "16.3.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-28.0.0.tar.gz",
"react-native-swiper": "^1.5.13",
"react-navigation": "2.0.1"
You are trying to get params outside of the class WifiScreen. thats why its getting error. You should get the params from within the class. like the following.
class WifiScreen extends Component{
render(){
const {itemId, otherParam} = this.props.navigation.state.params;
return (
<View style={styles.container}>
<Text>WifiScreen</Text>
<Text>itemId: {JSON.stringify(itemId)}</Text>
<Text>otherParam: {JSON.stringify(otherParam)}</Text>
</View>
);
}
}

React Native + NativeBase Content component and Carousel (not displaying)

Good day,
Here's a small problem with my React Native app which uses NativeBase components. The problem is within the <Content /> component of NativeBase. I want to use the <Carousel /> component from github which is react-native-carousel.
The code is as follows:
index.android.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
} from 'react-native';
import {
Container,
Header,
Content,
Title,
Icon,
Button,
} from 'native-base';
import Carousel from 'react-native-carousel';
import styles from './src/styles/styles';
export default class iABC extends Component {
render() {
return (
<Container>
<Header backgroundColor='#ffffff' height={50}>
<Button transparent>
<Icon name='md-menu' style={styles.header.icon} />
</Button>
<Title style={styles.header.title}>
iABC
</Title>
<Button transparent>
<Icon name='md-person' style={styles.header.icon} />
</Button>
</Header>
<Content>
<View style={styles.global.content}>
<Carousel width={375}
hideIndicators={false}
indicatorColor='#000000'
indicatorSize={25}
indicatorSpace={20}
indicatorAtBottom={true}
indicatorOffset={250}
indicatorText='>'
animate={true}
delay={2000}
loop={true}>
<View style={styles.carousel.page1}>
<Text>Page 1</Text>
</View>
<View style={styles.carousel.page1}>
<Text>Page 2</Text>
</View>
<View style={styles.carousel.page1}>
<Text>Page 3</Text>
</View>
</Carousel>
</View>
</Content>
</Container>
);
}
}
AppRegistry.registerComponent('iABC', () => iABC);
Style: carousel.js
'use strict'
import { StyleSheet } from 'react-native';
export default StyleSheet.create({
page1: {
flex: 1,
height: 150,
width: 375,
backgroundColor: '#cdcdcd',
justifyContent: 'center',
alignItems: 'center',
}
})
Style: global.js
'use strict'
import { StyleSheet } from 'react-native';
export default StyleSheet.create({
content: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
})
I have tried many things, styling carousel component, giving it a separate view, styling both at the same time, but unfortunately it doesn't work. However, as long as I remove <Content /> component of NativeBase, it works fine. I'm pretty sure that the problem is with the NativeBase component.
Thanks in advance.
About react-native-carousel
Renders Carousel
Carousel renders CarouselPager
And CarouselPagerrenders ScrollView of RN
About NativeBase Content, it renders ScrollView of RN. So wrapping it in another ScrollView is not necessary and causing problem.
Try excluding NB's Content.
Know more about NativeBase's replacing components - CheatSheet

Categories