I have a relatively simple component which renders properly on iOS but not Android. The component appears to render then the top 1/2 of the screen fades away. I'm sure the component is rendered but it appears the subcomponents are fading out or being covered by something. Given that the animation which occurs (quickly) looks like a fade, I think the components are still there.
The component is instantiated by a component which is created by react-navigation as a tab. This component has native-base components. The navigation.push() instantiates a react-native based component. All of the data required to render is in this.state object. Debugging reveals nothing.
Switching to another tab then back resolves the problem. Forcing re-rendering() in the event handler when the tab is focused has no effect.
I'm stumped.
This is the code:
import React, { Component } from 'react';
import {
Image,
} from 'react-native';
import {
Container,
Content,
Body,
Header,
Left,
Right,
Thumbnail,
ListItem,
List,
Text,
Button,
Footer,
FooterTab,
Card,
CardItem,
} from 'native-base';
import QRCode from 'react-native-qrcode';
export default class UnitDetailScreen extends Component {
static navigationOptions = ({ navigation }) => {
return {
title: 'Unit Details',
headerRight: <Button onPress={
() => {
navigation.navigate(
'UnitInstallation',
{ item: navigation.getParam('item') }
)
}
}>
<Text>Edit</Text>
</Button>,
}
};
state = {
};
componentDidMount() {
const navigation = this.props.navigation;
const item = navigation.getParam('item');
this.setState({ item: item, navigation: navigation });
}
getBatteryImage(item) {
return { uri: 'battery-green.png' };
}
render() {
if (this.state.item === undefined) {
return <Text>loading...</Text>;
}
// ok, now this is really wierd... the item is actually pointing to a row when this method called so we can't use getParam('item')
const rowStyle = {
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-start',
marginLeft: 10,
marginRight: 10,
padding: 10,
borderBottomColor: '#888'
};
const noPhoto = { uri: 'no-photo.png' }
return <Container>
<Content>
<Card>
<CardItem>
<Left>
<Thumbnail source={noPhoto} />
<Body>
<Text>Big Bad Machine</Text>
<Text note>The Lab</Text>
</Body>
</Left>
</CardItem>
</Card>
<Card>
<CardItem bordered>
<Image style={{
flex: 1,
height: 30,
width: undefined,
resizeMode: 'contain'
}} source={this.getBatteryImage(this.state.item)} />
</CardItem>
<CardItem>
<Left><Text style={{ fontWeight: 'bold' }}>Installed</Text></Left>
<Right><Text>{this.state.item.unit.installDate}</Text></Right>
</CardItem>
<CardItem>
<Left><Text style={{ fontWeight: 'bold' }}>Model</Text></Left>
<Right><Text>The model</Text></Right>
</CardItem>
<CardItem>
<Left><Text style={{ fontWeight: 'bold' }}>Serial</Text></Left>
<Right><Text>{this.state.item.unit.serialNumber}</Text></Right>
</CardItem>
<CardItem>
<Left><Text style={{ fontWeight: 'bold' }}>Purchased</Text></Left>
<Right><Text>{this.state.item.unit.purchaseDate}</Text></Right>
</CardItem>
<CardItem>
<Left><Text style={{ fontWeight: 'bold' }}>Installation</Text></Left>
<Right>
<Thumbnail square source={noPhoto} />
</Right>
</CardItem>
<CardItem>
<Left><Text style={{ fontWeight: 'bold' }}>QR Code</Text></Left>
<QRCode
value={this.state.item.unit.id}
size={80}
/>
</CardItem>
<CardItem>
<Left><Text style={{ fontWeight: 'bold' }}>Serial</Text></Left>
<Right><Text>{this.state.item.unit.serialNumber}</Text></Right>
</CardItem>
<CardItem>
<Left><Text style={{ fontWeight: 'bold' }}>ID</Text></Left>
<Right><Text>{this.state.item.unit.id}</Text></Right>
</CardItem>
</Card>
</Content>
<Footer>
<FooterTab>
<Button bordered light>
<Text>Photos/Notes</Text>
</Button>
<Button bordered light>
<Text>Installation Media</Text>
</Button>
</FooterTab>
</Footer>
</Container>
}
}
Initial render:
Navigate away:
Navigate back:
I fixed the problem using the SVG version of the component:
npm install react-native-qrcode-svg --save
The props to supply are the same for my application. This solved the problem.
Related
I'm new to react native and following the tutorial on youtube. After setup sanity for the backend app gave an error. This is the tutorial:- https://youtu.be/AkEnidfZnCU
this is my code:
import { useNavigation } from '#react-navigation/native';
import React, { useEffect, useLayoutEffect, useState } from 'react';
import { View, Text, Image, TextInput, ScrollView } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { UserIcon, ChevronDownIcon, MagnifyingGlassIcon, AdjustmentsHorizontalIcon } from "react-native-heroicons/outline";
import Categories from '../components/Categories';
import FeaturedRow from '../components/FeaturedRow';
import client from '../sanity';
const HomeScreen = () => {
const navigation = useNavigation();
const [featuredCategories, setFaaturedCategories] = useState([]);
useLayoutEffect(() => {
navigation.setOptions({
headerShown: false,
})
}, []);
useEffect(() => {
client.fetch(`
*[_type =="featured"]{
...,
restaurants[]->{
...,
dishes[]->
}
}
`).then(data => {
setFaaturedCategories(data);
});
}, []);
return (
<SafeAreaView className="bg-white pt-5">
{/* Header */}
<View className="flex-row pb-3 items-center mx-4 space-x-2">
<Image
source={{
uri: 'https://links.papareact.com/wru',
}}
className="h-7 w-7 bg-gray-300 p-4 rounded-full"
/>
<View className="flex-1">
<Text className="font-bold text-gray-400 text-xs">Deliver Now!</Text>
<Text className="font-bold text-xl">Current Location
<ChevronDownIcon size={20} color="#00CCBB" />
</Text>
</View>
<UserIcon size={35} color="#00CCBB" />
</View>
{/* Search box */}
<View className="flex-row items-center space-x-2 pb-2 mx-4">
<View className="flex-row flex-1 space-x-2 bg-gray-200 p-3">
<MagnifyingGlassIcon size={20} color="gray" />
<TextInput placeholder='Restaurant and cuisines' keyboardType='default' />
</View>
<AdjustmentsHorizontalIcon color="#00CCBB" />
</View>
{/* Body */}
<ScrollView className="bg-gray-100" contentContainerStyle={{ paddingBottom: 100 }}>
{/* Categories */}
<Categories />
{/* Featured Rows */}
<FeaturedRow
id="123"
title="Featured"
description="paid placemnts from our partners"
/>
{/* Tasty Discount */}
<FeaturedRow
id="1234"
title="Tasty Discount"
description="Everyone's been enjoying these juicy Discount"
/>
{/* Offers near you */}
<FeaturedRow
id="12345"
title="Offers near you"
description="Why not support your local restaurant tonight!"
/>
</ScrollView>
</SafeAreaView>
);
}
export default HomeScreen;
I have followed all the steps from the video. But it gives me an error.
This is sanity.js file
import sanityClient from '#sanity/client'
import imageUrlBuilder from '#sanity/image-url'
const client = sanityClient({
projectId: "gbg977pk",
dataset: "production",
useCdn: true,
apiVersion: "2021-10-21",
});
const builder = imageUrlBuilder(client);
export const urlFor = (source) => builder.image(source);
export default client;
This is the error
Please help me to solve this problem.
In React Native, you should use the style attribute to apply CSS styles to your elements, rather than the className attribute.
Consider for example, the line:
<SafeAreaView className="bg-white pt-5">
It should be changed to:
<SafeAreaView style={{ backgroundColor: 'white', paddingTop: 5 }}>
Your code with the changes applied:
import { useNavigation } from '#react-navigation/native';
import React, { useEffect, useLayoutEffect, useState } from 'react';
import { View, Text, Image, TextInput, ScrollView } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { UserIcon, ChevronDownIcon, MagnifyingGlassIcon, AdjustmentsHorizontalIcon } from "react-native-heroicons/outline";
import Categories from '../components/Categories';
import FeaturedRow from '../components/FeaturedRow';
import client from '../sanity';
const HomeScreen = () => {
const navigation = useNavigation();
const [featuredCategories, setFaaturedCategories] = useState([]);
useLayoutEffect(() => {
navigation.setOptions({
headerShown: false,
})
}, []);
useEffect(() => {
client.fetch(`
*[_type =="featured"]{
...,
restaurants[]->{
...,
dishes[]->
}
}
`).then(data => {
setFaaturedCategories(data);
});
}, []);
return (
<SafeAreaView style={{ backgroundColor: 'white', paddingTop: 5 }}>
{/* Header */}
<View style={{ flexDirection: 'row', paddingBottom: 3, marginHorizontal: 4, alignItems: 'center', justifyContent: 'space-between' }}>
<Image
source={{
uri: 'https://links.papareact.com/wru',
}}
style={{ height: 7, width: 7, backgroundColor: 'gray-300', padding: 4, borderRadius: 'full' }}
/>
<View style={{ flex: 1 }}>
<Text style={{ fontWeight: 'bold', color: 'gray-400', fontSize: 'xs' }}>Deliver Now!</Text>
<Text style={{ fontWeight: 'bold', fontSize: 'xl' }}>Current Location
<ChevronDownIcon size={20} color="#00CCBB" />
</Text>
</View>
<UserIcon size={35} color="#00CCBB" />
</View>
{/* Search box */}
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingBottom: 2, marginHorizontal: 4 }}>
<View style={{ flexDirection: 'row', flex: 1, justifyContent: 'space-between', backgroundColor: 'gray-200', padding: 3 }}>
<MagnifyingGlassIcon size={20} color="gray" />
<TextInput placeholder='Restaurant and cuisines' keyboardType='default' />
</View>
<AdjustmentsHorizontalIcon color="#00CCBB" />
</View>
{/* Body */}
<ScrollView style={{ backgroundColor: 'gray-100' }} contentContainerStyle={{ paddingBottom: 100 }}>
{/* Categories */}
<Categories />
{/* Featured Rows */}
<FeaturedRow
id="123"
title="Featured"
description="paid placemnts from our partners"
/>
{/* Tasty Discount */}
<FeaturedRow
id="1234"
title="Tasty Discount"
description="Everyone's been enjoying these juicy Discount"
/>
{/* Offers near you */}
<FeaturedRow
id="12345"
title="Offers near you"
description="Why not support your local restaurant tonight!"
/>
</ScrollView>
</SafeAreaView>
);
}
export default HomeScreen;
I have 4 tabs load using tabnavigator. I have home, favourite, cart and profile screen. User will choose desired product on home, add it to cart. The badge count on tab is updating, but when I'm go to cart screen, it is still plain empty.
I'm running on development. So if I refresh my script on VSCode, the product will be show on cart screen.
This is my cart script:-
renderProductList() {
var contents = appGlobal.ObjProduct.map((item) => {
return (
<Content key={item.ProdID}>
<TouchableOpacity onPress={() => {
console.log('Touch item: ' + JSON.stringify(item));
}}>
<Card>
<CardItem>
<Left>
<FastImage
source={{ uri: item.ProdImage, priority: FastImage.priority.normal, }}
style={{
width: 50,
height: 50,
alignItems: 'center',
justifyContent: 'center',
}}
resizeMode={FastImage.resizeMode.cover}
/>
</Left>
<Body>
<Text>{item.ProdName}</Text>
</Body>
<Right>
</Right>
</CardItem>
</Card>
</TouchableOpacity>
</Content>
);
});
return (
<Content padder>
{contents}
</Content>
)
}
renderNoProduct() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', }}>
<SvgUri width="150" height="150" source={EmptyCart} />
<Text style={{ color: 'gray', marginTop: 10 }}>Your cart is empty :(</Text>
</View>
)
}
render() {
return (
<Container>
<Header searchBar rounded>
<Left style={{ flex: null }}>
</Left>
<Body style={{ flex: 3 }}>
<Title style={{ marginLeft: 10, }}>Shopping Cart</Title>
</Body>
<Right style={{ flex: null }}>
</Right>
</Header>
{appGlobal.ObjProduct.length > 0 ? this.renderProductList() : this.renderNoProduct()}
<Footer>
<FooterTab>
<Button style={{ backgroundColor: '#d15f02' }}>
<Text style={{ color: 'white' }}>Proceed to order</Text>
</Button>
</FooterTab>
</Footer>
</Container>
);
}
It is another way to make it global mapping or product change when using tab navigator?
You need to call a function when the focused screen changes on TabNavigation
on your Cart tab use this:
import { withNavigationFocus } from 'react-navigation';
class CartScreen extends React.Component {
componentDidUpdate(prevProps) {
if (prevProps.isFocused !== this.props.isFocused) {
// Call any action to update you view
//fetch data when the component is focused
//To prevent extra component re-renders, you may need to write some logic in shouldComponentUpdate
}
}
render() {
return (
<Container>
<Text>{this.props.isFocused ? 'Focused' : 'Not focused'}</Text>
</Container>
);
}
}
// withNavigationFocus returns a component that wraps CartScreen and passes
// in the navigation prop
export default withNavigationFocus(CartScreen);
withNavigationFocus
withNavigationFocus is a higher-order component which passes the isFocused prop into a wrapped component. It's useful if you need to use the focus state in the render function of your screen component or another component rendered somewhere inside of a screen.
I'm trying to create a page that where I can edit the 'tenant' data.
Here is my page:
import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import {
Container, Header, Content, Card,
CardItem, Text, Icon, Right,
Left, Body, Title, Button }
from 'native-base';
import { Avatar } from 'react-native-elements';
import NavigationService from '../NavigationService';
class TenantDetails extends Component {
render() {
const { navigation } = this.props;
return (
<Container>
<Header>
<Left>
<Button
transparent
onPress={() => NavigationService.navigate('Tenants')}
>
<Icon name='arrow-back' />
</Button>
</Left>
<Body>
<Title>My Name</Title>
</Body>
<Right />
</Header>
<Content>
<View style={styles.userRow}>
<View style={styles.userImage}>
<Avatar
rounded
size="large"
source={{
uri: 'https://myirent.com/rent/appImg/person-icon.png',
}}
/>
</View>
<View>
<Text style={{ fontSize: 16 }}>Jonh Test</Text>
<Text
style={{
color: 'gray',
fontSize: 16,
}}
>
joinh#gmail.com{'\n'}xxx-xxx-xxxx
</Text>
</View>
</View>
<Card>
<View style={styles.containerTextHeader}>
<Text style={styles.infoTextHeader}>Tenant Details</Text>
</View>
<CardItem>
<Icon active name="logo-googleplus" />
<Text>First Name</Text>
<Right>
<Icon name="arrow-forward" />
</Right>
</CardItem>
</Card>
</Content>
</Container>
);
}
}
const styles = StyleSheet.create({
scroll: {
backgroundColor: 'white',
},
userRow: {
alignItems: 'center',
flexDirection: 'row',
paddingBottom: 8,
paddingLeft: 15,
paddingRight: 15,
paddingTop: 6,
},
userImage: {
marginRight: 12,
},
listItemContainer: {
height: 55,
borderWidth: 0.5,
borderColor: '#ECECEC',
},
containerTextHeader: {
paddingTop: 20,
paddingBottom: 12,
backgroundColor: '#F4F5F4',
},
infoTextHeader: {
fontSize: 16,
marginLeft: 20,
color: 'gray',
fontWeight: '500',
},
});
export default TenantDetails;
Thanks. I 'm having issue with the right arrow not align to the right (image below). Also, how can I change the to have a label and value (Where I have First Name)? So when I click on it, I can open. modal to edit the value
Screen:
here is part of your code. i add Left tag:
<Card>
<View style={styles.containerTextHeader}>
<Text style={styles.infoTextHeader}>Tenant Details</Text>
</View>
<CardItem>
<Left>
<Icon active name="logo-googleplus" />
<Text>First Name</Text>
</Left>
<Right>
<Icon name="arrow-forward" />
</Right>
</CardItem>
</Card>
for modal problem, you can install react-native-modal by npm install --save react-native-modal.
wrap a button around CardItem that you need to onPress it. then call on onPress, a method that it changes your state of visibility for modal.
something such as this code:
<Modal
style={{ margin: 0 }}
isVisible={this.state.modalVisible}
/>
for changing of your field such as name, etc, use state of component
I'm developing a new mobile app with Drawer component in native-base.
And I'm facing the error message below when clicking the Icon on the right side on the header.
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRed()?
This is the GIF when clicking the icon.
https://gyazo.com/31c6483acfda7ad3c6239e6171dbe688
These are my code.
App.js
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { createDrawerNavigator,createAppContainer, createStackNavigator, DrawerItems } from 'react-navigation'
import { Container, Content, Header, Left } from 'native-base';
import { Router, Scene } from 'react-native-router-flux';
import HomeScreen from './src/screens/HomeScreen';
import NoticeScreen from './src/screens/NoticeScreen';
import UserScreen from './src/screens/UserScreen';
export default class App extends Component{
render(){
return(
<Router>
<Scene key='root'>
<Scene key='HomeScreen' component={HomeScreen} hideNavBar={true} panHandlers={null}/>
<Scene key='NoticeScreen' component={NoticeScreen} hideNavBar={true} panHandlers={null} />
<Scene key='UserScreen' component={UserScreen} hideNavBar={true} panHandlers={null} />
</Scene>
</Router>
);
}
}
HomeScreen.js
import React, { Component } from 'react';
import { Image, ImageBackground, Text, Linking, ScrollView, StyleSheet, View, Dimensions, TouchableOpacity, SafeAreaView } from 'react-native';
import { Body, Container, Content, ListItem, List, Header, Icon, Left, Right, Thumbnail, Drawer } from "native-base";
import { Actions } from 'react-native-router-flux';
import SidebarContainer from '../containers/SidebarContainer';
export default class HomeScreen extends Component {
openDrawer() {
this.drawer._root.open();
};
closeDrawer() {
this.drawer._root.close();
};
render() {
return (
<Drawer
ref={(ref) => { this.drawer = ref; }}
content={<SidebarContainer navigator={this._navigator} />}
openDrawerOffset={0.4}
tapToClose={true}
onClose={() => this.closeDrawer}
onOpen={() => this.openDrawer}
styles={{ height: 100 }}
>
<ImageBackground source={require('../../assets/header/blue.jpg')} style={{ width: null }}>
<Header style={{ backgroundColor: 'transparent' }}>
<Left style={{ flexDirection: 'row'}}>
<Icon onPress={this.openDrawer.bind(this)} type='MaterialIcons' name='menu' style={{ color: 'white', justifyContent: 'center' }} />
</Left>
<Body>
</Body>
<Right>
<TouchableOpacity onPress={Actions.UserScreen}>
<Thumbnail small source={require('../../assets/thumbnail.png')} style={{ justifyContent: 'center' }} />
</TouchableOpacity>
</Right>
</Header>
</ImageBackground>
</Drawer>
)
}
}
UserScreen.js
import React, { Component } from 'react';
import { Image, ImageBackground, Text, ScrollView, View } from 'react-native';
import { Body, Header, Icon, Left, Right, Thumbnail, Card, CardItem } from "native-base";
import { Drawer } from 'react-native-router-flux';
import SidebarContainer from '../containers/SidebarContainer';
import SmallHeadLineComponent from '../components/SmallHeadLineComponent';
export default class UserScreen extends Component {
openDrawer() {
this.drawer._root.open();
};
closeDrawer() {
this.drawer._root.close();
};
render() {
return (
<Drawer
ref={(ref) => { this.drawer = ref; }}
content={<SidebarContainer navigator={this._navigator} />}
openDrawerOffset={0.4}
tapToClose={true}
onClose={() => this.closeDrawer}
onOpen={() => this.openDrawer}
styles={{ height: 100 }}
>
<ImageBackground source={require('../../assets/header/blue.jpg')} style={{ width: null }}>
<Header style={{ backgroundColor: 'transparent' }}>
<Left style={{ flexDirection: 'row'}}>
<Icon onPress={this.openDrawer.bind(this)} type='MaterialIcons' name='menu' style={{ color: 'white', justifyContent: 'center' }} />
</Left>
<Body>
</Body>
<Right>
<Icon onPress={() => (alert('Open Modal'))} type='MaterialIcons' name='mail' style={{ color: 'white', justifyContent: 'center' }} />
</Right>
</Header>
</ImageBackground>
<ScrollView style={{ paddingTop: 10 }}>
<View style={{ flex:1, justifyContent: 'center', alignItems: 'center', marginTop: 10 }}>
<Thumbnail large source={require('../../assets/thumbnail.png')} style={{ justifyContent: 'center' }}/>
</View>
<View>
<Card style={{ marginLeft: 100, width: 200, justifyContent: 'center' }}>
<CardItem style={{ alignItems: 'center' }}>
<Body>
<Text style={{ fontWeight: 'bold', alignItems: 'center', justifyContent: 'center' }}>
kikuchi.user
</Text>
</Body>
</CardItem>
</Card>
</View>
<View>
<SmallHeadLineComponent text={'Sample'} />
</View>
</ScrollView>
</Drawer>
)
}
}
SidebarCotainer.js
import React, { Component } from 'react';
import { View, Text, ImageBackground, Image, TouchableOpacity, SafeAreaView } from 'react-native';
import { Container, Content, Drawer, Header, Left, Icon, Body, Right, Thumbnail, List, ListItem } from 'native-base';
import { Actions } from 'react-native-router-flux';
export default class SidebarContainer extends Component {
render() {
return (
<Container>
<View style={{ height: 1000 }}>
<Header style={{ height: 65, backgroundColor: 'white' }}>
<Left>
<Text style={{ paddingLeft: 10 }}>
Sidebar Title
</Text>
</Left>
</Header>
<Content>
<List>
<ListItem button noBorder={true} onPress={Actions.HomeScreen} >
<Icon type='Ionicons' name='md-home' />
<Text style={{ paddingLeft: 10 }}>Home</Text>
</ListItem>
<ListItem button noBorder={true} onPress={Actions.NoticeScreen} >
<Icon type='Ionicons' name='ios-notifications' />
<Text style={{ paddingLeft: 10 }}>Notice</Text>
</ListItem>
<ListItem button onPress={Actions.SignInScreen} >
<Icon type='Ionicons' name='ios-remove-circle-outline' />
<Text style={{ paddingLeft: 10 }}>SignOut</Text>
</ListItem>
</List>
</Content>
</View>
</Container>
)
}
}
I understand why I'm wrong.
I'm using Drawer component from react-native-router-flux. I thought I'm using the one from native-base.
I don't have to rely on the code completion in my IDE.
I'm having trouble displaying my custom component in ReactNative on Android simulator. Specifically, the appears as a flat line (height is close to 0 - see the blue line immediately below "Authentication"), when it should have some height. How do I make the button have height? See below. Thanks!
Here's my code:
App.js (the parts that are relevant towards displaying the button)
renderContent() {
return (
<Button onPress={() => firebase.auth().signOut()}>
Log Out
</Button>
);
}
render() {
return (
<View>
<Header headerText="Authentication"/>
{this.renderContent()} //button is rendered here.
</View>
);
}
Custom-defined button:
import React from 'react';
import { Text, TouchableOpacity } from 'react-native';
const Button = ({ onPress, children }) => {
const { buttonStyle, textStyle } = styles;
return (
<TouchableOpacity onPress={onPress} style={buttonStyle}>
<Text style={textStyle}>
{children}
</Text>
</TouchableOpacity>
);
};
const styles = {
textStyle: {
alignSelf: 'center',
color: '#007aff',
fontSize: 16,
fontWeight: '600',
paddingTop: 10,
paddingBottom: 10
},
buttonStyle: {
flex: 1,
alignSelf: 'stretch',
backgroundColor: '#fff',
borderRadius: 5,
borderWidth: 1,
borderColor: '#007aff',
marginLeft: 5,
marginRight: 5
}
};
export { Button };
You should specify your custom button height.
<View>
<View>
<Header headerText="Authentication"/>
</View>
<View style={{height:50}}>
{this.renderContent()} //button is rendered here.
</View>
</View>
Or you can use ScrollView instead.
<View>
<View>
<Header headerText="Authentication"/>
</View>
<ScrollView>
{this.renderContent()} //button is rendered here.
</ScrollView>
</View>