After adding flex : 1, screen turning white screen, when I remove the flex : 1, it shows
what is the problem, I cant find, please reply sooooooon
import React from 'react'
import { View, StyleSheet, ScrollView } from 'react-native'
import { Header } from '../components/home/Header'
import Post from '../components/home/Post'
import Stories from '../components/home/Stories'
import { POSTS } from '../data/posts'
import BottomTabs, { bottomTabIcons } from '../components/home/BottomTabs'
const HomeScreen = () => {
return (
<View style={styles.container}>
<Header />
<Stories />
<ScrollView>
{POSTS.map((post, index) =>(
<Post post={post} key={index} />
))}
</ScrollView>
<BottomTabs icons={bottomTabIcons} />
</View>
)
}
const styles = StyleSheet.create({
container : {
flex : 1,
backgroundColor : 'black',
}
})
export default HomeScreen
Related
I'm using react-native-toast-notifications package for showing in-app notifications.
I'm trying to integrate it for showing notifications when a chat arrives. But this notification is also being displayed on the chat room screen where the one-to-one chat happens.
How can I prevent the notification being appeared on the chat room screen?
This is my provider component
<ToastProvider
swipeEnabled={true}
placement="top"
duration={5000}
animationType="zoom-in"
animationDuration={300}
renderType={{
message_toast: (toast) => <ToastContainer toast={toast} />,
}}
>
<SymbolsProvider>
<Navigation />
</SymbolsProvider>
</ToastProvider>
I'm using the useToast() hook provided by the package to show notifications
const toast = useToast();
toast.show(socketMessage.username + " Sent a message", {
position: "bottom",
duration: 3000,
style: toastStyle,
type: "success",
});
Sent a message
This notification is appearing on the chat room screen also which should not be happening.
Here's an example base on the comment under the question:
import { ToastProvider } from 'react-native-toast-notifications'
import {NavigationContainer} from '#react-navigation/native'
import Screens from './screens/index'
export default function App() {
return (
<ToastProvider>
<NavigationContainer>
<Screens />
</NavigationContainer>
</ToastProvider>
);
}
import React from 'react';
import {
SafeAreaView,
View,
StyleSheet,
TouchableOpacity,
Text,
} from 'react-native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import { createDrawerNavigator } from '#react-navigation/drawer';
import { useNavigation } from '#react-navigation/native';
import { useToast } from 'react-native-toast-notifications';
const Stack = createNativeStackNavigator();
const Drawer = createDrawerNavigator();
const ToastButton = ({ style}) => {
const toast = useToast();
const navigation = useNavigation();
const navState = navigation.getState();
console.log(navState.routeNames);
const currentRoute = navState.routeNames[navState.index];
const onPress = () => {
if (currentRoute != 'Chat') toast.show('Toast from ' + currentRoute);
};
return (
<TouchableOpacity style={[styles.container, style]} onPress={onPress}>
<Text>Show Toast</Text>
</TouchableOpacity>
);
};
const HomeScreen = (props) => {
return (
<View style={styles.flex}>
<ToastButton />
</View>
);
};
const ChatScreen = (props) => {
return (
<View style={styles.flex}>
<ToastButton />
</View>
);
};
export default function ScreenIndex(props) {
return (
<SafeAreaView style={{ flex: 1 }}>
<Drawer.Navigator useLegacyImplementation={true}>
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="Chat" component={ChatScreen} />
</Drawer.Navigator>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
flex: {
flex: 1,
backgroundColor: '#eef',
},
});
Currently trying to setup react-native-action-sheet and getting an invalid hook call
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
I followed the example and wrapped my wrapped your top-level component with even when using hooks.
export default () => (
<ActionSheetProvider>>
<App />
</<ActionSheetProvider>>
);
Wondering if it's the way I set this up:
import { Linking } from 'react-native';
import { useActionSheet } from '#expo/react-native-action-sheet';
export const SideButton = () => {
const { showActionSheetWithOptions } = useActionSheet();
const cancelButtonIndex = 1;
const options = ['Email', 'Cancel'];
const title = 'Email Me';
const message = 'Let me know your issues';
return showActionSheetWithOptions(
{
options,
cancelButtonIndex,
title,
message,
},
(buttonIndex) => {
if (buttonIndex === 0) {
Linking.openURL('mailto:_____').catch();
} else {
return;
}
}
);
};
Or even how I call it here:
import { Linking, Text, TouchableOpacity, View } from 'react-native';
import { SideButton } from './utils/HelpPopUp';
const ButtonContainer = () => (
<TouchableOpacity>
<Text onPress={() => Linking.openURL('_MY_WEBSITE_').catch()}>Checkout my stuff</Text>
</TouchableOpacity>
);
const Menu = (props) => {
return (
<View>
<ButtonContainer />
</View>
);
};
export default Menu;
Sorry, my answer would be to suggest an alternative rather than answer your question and present the component I use myself. I did not use the package you mentioned in the topic, but I tried with a different package before, it does the same job. https://www.npmjs.com/package/react-native-actions-sheet
This is the custom component I used.
import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import ActionSheet from 'react-native-actions-sheet';;
const CustomActionSheet = React.forwardRef(({children, title}, ref) => {
return (
<ActionSheet
ref={ref}
headerAlwaysVisible={true}
containerStyle={[
styles.containerStyle,
{backgroundColor: '#FFF'},
]}
CustomHeaderComponent={
<View style={[styles.header, {backgroundColor: '#4ac'}]}>
<Text style={styles.title}>
{title}
</Text>
</View>
}>
{children}
</ActionSheet>
);
});
const styles = StyleSheet.create({
header: {
height: 50,
justifyContent: 'center',
padding: 5,
},
title: {
color: '#FFF',
fontSize: globalStyles.titleText.fontSize,
},
containerStyle: {
borderRadius: 0,
},
});
export default CustomActionSheet;
Usage:
import React, { createRef } from "react";
import {View, Text} from "react-native";
import CustomActionSheet from './CustomActionSheet';
const actionSheetRef = createRef();
const AnythingPage = () => {
return (
<View>
<Text onPress={() => actionSheetRef.current?.show()}>
Open Custom Sheet
</Text>
<CustomActionSheet ref={actionSheetRef} title={'Title'}>
<View>
<Text>Add anything in it.</Text>
</View>
</CustomActionSheet>
</View>
)
}
You can develop a structure that will be used in the whole application by going through these.
I'm trying to display an image in my app but I couldn't, the image not displaying and am not seeing any error, Thanks for your help. Here are my code.
This is the file am having all the data for the repositories, and also render the <RepositoryItem> component for each repository.
Main.jsx
import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet } from 'react-native';
import RepositoryItem from './RepositoryItem';
const repositories = [
{
id: 'jaredpalmer.formik',
fullName: 'jaredpalmer/formik',
description: 'Build forms in React, without the tears',
language: 'TypeScript',
forksCount: 1589,
stargazersCount: 21553,
ratingAverage: 88,
reviewCount: 4,
ownerAvatarUrl: 'https://avatars2.githubusercontent.com/u/4060187?v=4',
}
];
const ItemSeparator = () => <View style={styles.separator} />;
const RepositoryList = () => {
const renderItem = ({item}) => <RepositoryItem item={item} />;
return (
<SafeAreaView>
<FlatList
data={repositories}
ItemSeparatorComponent={ItemSeparator}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
separator: {
height: 10,
},
});
export default RepositoryList;
And this is the file am displaying the each repository.
Item.jsx
import React from 'react';
import { Text, View, Image } from 'react-native';
const Item = ({ fullName,
description,
language,
forksCount,
stargazersCount,
ratingAverage,
ownerAvatarUrl,
reviewCount }) => (
<View>
<Text>Full name: {fullName}</Text>
<Text>Description: {description}</Text>
<Text>Language: {language}</Text>
<Text>Stars: {stargazersCount}</Text>
<Text>Forks: {forksCount}</Text>
<Text>Reviews: {reviewCount}</Text>
<Text>Rating: {ratingAverage}</Text>
<Image source={{ uri: ownerAvatarUrl }} />
</View>
);
const RepositoryItem = ({ item }) => {
return (
<View>
<Image ownerAvatarUrl={item.ownerAvatarUrl} />
<Item
fullName={item.fullName}
description={item.description}
language={item.language}
stargazersCount={item.stargazersCount}
forksCount={item.forksCount}
reviewCount={item.reviewCount}
ratingAverage={item.ratingAverage}
/>
</View>
);
};
export default RepositoryItem;
Thanks for your help
I solve it by making these changes, First I added style to make make the image smaller and some changes. this is the Item.jsx file now.
import React from 'react';
import { Text, View, Image, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
tinyLogo: {
width: 50,
height: 50,
}
});
const Item = ({ fullName,
description,
language,
forksCount,
stargazersCount,
ratingAverage,
ownerAvatarUrl,
reviewCount }) => (
<View>
<Image
style={styles.tinyLogo}
source={{
uri: ownerAvatarUrl,
}}
/>
<Text>Full name: {fullName}</Text>
<Text>Description: {description}</Text>
<Text>Language: {language}</Text>
<Text>Stars: {stargazersCount}</Text>
<Text>Forks: {forksCount}</Text>
<Text>Reviews: {reviewCount}</Text>
<Text>Rating: {ratingAverage}</Text>
</View>
);
const RepositoryItem = ({ item }) => {
return (
<View>
{/* <Image ownerAvatarUrl={item.ownerAvatarUrl} /> */}
<Item
fullName={item.fullName}
description={item.description}
language={item.language}
stargazersCount={item.stargazersCount}
forksCount={item.forksCount}
reviewCount={item.reviewCount}
ratingAverage={item.ratingAverage}
ownerAvatarUrl={item.ownerAvatarUrl}
/>
</View>
);
};
export default RepositoryItem;
I'm tying to change content of tabs in react-native-material-bottom-navigation but when I press tab it redirect me to respective page. I want to change content between header and tabs. I've tried below code but I don't know how to display content in condition statement.
HomeScreen.js
import React, {Component} from 'react';
import {Text, View } from 'react-native';
import BottomNavigation, { Tab } from 'react-native-material-bottom-navigation';
import Icon from 'react-native-vector-icons/MaterialIcons';
import HomeScreenContent from './HomeScreenContent';
import Categories from './Categories';
import Profile from './Profile';
export default class HomeScreen extends Component {
constructor(props) {
super(props);
this.handleTabChange = this.handleTabChange.bind(this);
this.state = { activeTab: 0 };
}
handleTabChange(newTabIndex, oldTabIndex) {
this.setState({ activeTab: newTabIndex });
if (newTabIndex === oldTabIndex) {
null;
}
if (this.state.activeTab === 0) {
<HomeScreenContent />
} else if (this.state.activeTab === 1) {
<Categories/>
} else {
<Profile />
}
}
render() {
return (
<View style={styles.container}>
<BottomNavigation
activeTab={this.state.activeTab}
labelColor="#5c007a"
rippleColor="white"
style={{
height: 56,
elevation: 8,
position: 'absolute',
left: 0,
bottom: 0,
right: 0
}}
onTabChange={this.handleTabChange}
>
<Tab
barBackgroundColor="#fff"
label="Home"
icon={<Icon size={24} color="#5c007a" name="home" />}
/>
<Tab
barBackgroundColor="#fff"
label="Categories"
icon={<Icon size={24} color="#5c007a" name="list" />}
/>
<Tab
barBackgroundColor="#fff"
label="Profile"
icon={<Icon size={24} color="#5c007a" name="person" />}
/>
</BottomNavigation>
</View>
);
}
}
HomeScreenContent.js
import React from 'react';
import { TouchableOpacity, ScrollView, Image, Dimensions , StyleSheet, Text, View } from 'react-native';
export default class HomeScreenContent extends React.Component {
render() {
return (
<View>
<Text> Hello from HomeScreen</Text>
</View>
);
}
}
Categories.js
import React from 'react';
import { Text, View } from 'react-native';
export default class HomeScreenContent extends React.Component {
render() {
return (
<View>
<Text> Hello from Categories</Text>
</View>
);
}
}
Profile.js
import React from 'react';
import {Text, View } from 'react-native';
export default class HomeScreenContent extends React.Component {
render() {
return (
<View>
<Text> Hello from Profile</Text>
</View>
);
}
}
For some strange reason, the header has a height of 667. I have copy pasted the code from an example page. See screenshot:
Code:
import React, { Component } from 'react';
import { Container, Header, Left, Body, Right, Button, Icon, Title } from 'native-base';
export default class HeaderIconTextExample extends Component {
render() {
return (
<Container>
<Header style={{backgroundColor:'red'}}>
<Left>
<Button transparent>
<Icon style={{color:'white'}} name='menu' />
</Button>
</Left>
<Body>
<Title style={{color:'white'}}>{this.props.headerText}</Title>
</Body>
<Right>
<Button transparent>
<Icon style={{color:'white'}} name='ios-add' />
</Button>
</Right>
</Header>
</Container>
);
}
}
I have tried to apply a height to the container (e.g. 100 pixels) but that does not change anything.
Update
I have realised, that if I remove ScrollView, then the content is in the very top, in front of the header, like this:
Code:
import React, {
Component
} from 'react';
import {
ScrollView, View
} from 'react-native';
import KeyDetail from './KeyDetail'
import axios from 'axios';
class KeyList extends Component {
state = {
keys: []
};
componentWillMount() {
axios.get('https://rallycoding.herokuapp.com/api/music_albums')
.then(response => this.setState({ keys: response.data }));
}
renderKeys() {
return this.state.keys.map(key =>
<KeyDetail thekey={key} key={key.title} />
);
}
render() {
return (
<ScrollView>
{ this.renderKeys() }
</ScrollView>
);
}
}
export default KeyList;
index.ios.js
/**
* Import a library to help create a component
*/
import React from 'react';
import {
AppRegistry,
View
} from 'react-native';
import Header from './src/components/Header';
import KeyList from './src/components/KeyList';
/**
* Create a component
*/
const App = () => (
<View style={{ flex: 1 }}>
<Header headerText={'Your Keys'} />
<KeyList />
</View>
);
/**
* Render to device
*/
AppRegistry.registerComponent('myapp', () => App);
Hmm. The solution (although not as pretty), is to wrap KeyList in index.ios.js inside a View, and then add marginBottom to prevent content from floating inside header.
index.ios.js
/**
* Import a library to help create a component
*/
import React from 'react';
import {
AppRegistry,
View
} from 'react-native';
import Header from './src/components/Header';
import KeyList from './src/components/KeyList';
/**
* Create a component
*/
const App = () => (
<View style={{ flex: 1 }}>
<Header headerText={'Your Keys'} />
<View>
<KeyList />
</View>
</View>
);
/**
* Render to device
*/
AppRegistry.registerComponent('uniqkey', () => App);
Header.js
import React, { Component } from 'react';
import { Container, Header, Left, Body, Right, Button, Icon, Title } from 'native-base';
export default class HeaderIconTextExample extends Component {
render() {
return (
<Container style={{marginBottom:64}}>
<Header style={{backgroundColor:'red'}}>
<Left>
<Button transparent>
<Icon style={{color:'white'}} name='menu' />
</Button>
</Left>
<Body>
<Title style={{color:'white'}}>{this.props.headerText}</Title>
</Body>
<Right>
<Button transparent>
<Icon style={{color:'white'}} name='ios-add' />
</Button>
</Right>
</Header>
</Container>
);
}
}
In your HeaderIconTextExample component you haven't specify the height for the header. Add this style in HeaderIconTextExample component.
const Styles = StyleSheet.create({
viewStyle: {
backgroundColor: '#F8F8F8',
justifyContent: 'center',
alignItems: 'center',
height: 60,
paddingTop: 15,
},
});
const { viewStyle } = Styles;
Update this line:
<Header style={{backgroundColor:'red'}}>
to this:
<Header style={viewStyle}>
It will work fine.
You can check my complete github repo code of this Albums react native App.