I try to recreate this application in react-native :
But I don't have any clue for making the red component.
I search on internet and I found react-navigation V5, But it look complicated just for that.
I also think to create a horizontal ScrollView, and every time I click on new 'page', rerender all the current view. But this is a good way?
Thanks for answers.
I like #mainak's suggestion of using react-native-tab-view. To add to that answer I've made a simple implementation that does what you want.
First install the library: yarn add react-native-tab-view or npm i react-native-tab-view --save.
Then you can do something like this:
// ...
import {TabView, SceneMap, TabBar} from 'react-native-tab-view';
// ...
const initialLayout = {width: Dimensions.get('window').width};
const renderTabBar = (props) => (
<TabBar
{...props}
tabStyle={{width: 120}}
scrollEnabled={true}
indicatorStyle={{backgroundColor: 'white', height: 5, borderRadius: 10}}
/>
);
const App = () => {
// ...
const [index, setIndex] = React.useState(0);
const [routes] = React.useState([
{key: 'first', title: 'First'},
{key: 'second', title: 'Second'},
{key: 'third', title: 'Third'},
{key: 'fourth', title: 'Fourth'},
{key: 'fifth', title: 'Fifth'},
]);
const renderScene = SceneMap({
first: FirstRoute,
second: SecondRoute,
third: ThirdRoute,
fourth: FourthRoute,
fifth: FifthRoute,
});
return (
<TabView
navigationState={{index, routes}}
renderTabBar={renderTabBar}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={initialLayout}
/>
);
};
const styles = StyleSheet.create({
scene: {
flex: 1,
},
});
I've defined view components named FirstRoute, SecondRoute, etc...But change this to the screens you want to have in the tab bar.
The critical part here is renderTabBar, the custom TabBar component that is passed to the TabView component. On the TabBar component we have an option called scrollEnabled which if set to true, allows us to scroll the bar from left to right depending on the size of the tab view and tabs.
I've defined a width of 120 for each tab, but you might want play around with this value depending on the size of your tab labels.
The red highlight underneath the active tab bar you refer to is called an indicator and can be styled using the indicatorStyle prop:
indicatorStyle={{backgroundColor: 'white', height: 5, borderRadius: 10}}
For more info look at the documentation on the github page: https://github.com/satya164/react-native-tab-view.
You can try with react-native-tab-view. I've used this for my similar kind of work.
Related
Unable to display custom view as list item in react native paper List accordian . I could only figure out that it can be used for text but not for custom components or custom views. Can anyone let me know if this can be done using react native paper or should i move to some other npm package.
You can display custom view like this
<List.Accordion
title="Accordion"
left={(props) => <List.Icon {...props} icon="folder" />}>
<TextInput style={{height:100}} placeholder={'enter text...'}/>
</List.Accordion>
You can use custom png icon
const arrowRight = require('../assets/Img/Icons/arrowRight.png')
const arrowDown = require('../assets/Img/Icons/arrowDown.png')
<List.AccordionGroup>
<List.Accordion
right={(props) => <Image style={styles.accordIcon} source={props.isExpanded ? arrowDown : arrowRight} />}
title={quickLinks.title}
id={quickLinks.id}
>
<View style={styles.quickLinkTextWrap}>
<Text>{quickLinks.description}</Text>
</View>
</List.Accordion>
</List.AccordionGroup>
accordIcon: {
width: 12,
height: 12,
resizeMode: 'contain',
tintColor: "#000"
},
I am developing an app using React Native and I'm struggling to figure out why my component re-renders in iOS but not in Android. I'm expecting it not to re-render, which means that the Android behavior is the one I'm looking for. The problem is, I don't want this headerIcons to be re-rendered. I've tried useCallback, useMemo, React.memo but it keeps refreshing in iOS devices...
The re-rendering part is the headerIcons argument inside the headerRightIcons parameter of the <Header.NoTitle> component. And here is the thing, this <Header.NoTitle> shows two icons on the screen, one is the < goBack button and the other is the ? help center button (the headerRightIcons parameter) but the only icon being re-rendered is the ? icon. The other one stays fixed.
All the components are being wrapped in a Pull-to-refresh scheme, but the requisition is only being made inside the last Container. Which means that the only part of the screen I wanted to be refreshed is the Container.
const headerIcons = useMemo(
() => [
{
icon: 'question-circle',
onPress: () =>
goToSection(
navigation as never,
EnumInvoiceMainScreenArrivedFrom.MyInvoices,
),
},
],
[navigation],
);
return (
<Wrapper>
<ScrollView
refreshControl={
<RefreshControl onRefresh={onRefresh} refreshing={isRefresh} />
}
stickyHeaderIndices={[0]}
>
<HeaderContainer>
<Header.NoTitle onBackPress={goBack} headerRightIcons={headerIcons} />
<Title>{t(`${i18nPrefix}.title`)}</Title>
<TabRender
tabs={tabsToRender}
tabIndex={tabIndex}
onTabSelected={setTabIndex}
/>
</HeaderContainer>
<Container flex={1} key={`list-updated-${refreshCounter}-times`}>
{children}
</Container>
</ScrollView>
</Wrapper>
);
};
Does the same thing happen if you do it like this?
const handleRightIconPress = ()=>{
goToSection(navigation, EnumInvoiceMainScreenArrivedFrom.MyInvoices)
}
<Header.NoTitle onBackPress={goBack}
headerRightIcons={{
icon: 'question-circle',
onPress: handleRightIconPress,
}}
/>
I've been building react-native for android at beginning and never been into IOS as I don't have project that use IOS at that moment and I don't own IOS or MacOS. And I'm clueless of what is difference between IOS and Android in general. I'm currently need to develop my app to be able to use by both Android and IOS.
What are the common things that need to be handle? To be exact, check for Platform. From maestral-solutions, it shows on stylesheet that the header height and margin top:-
const styles = StyleSheet.create({
header: {
height: Platform.OS === 'android' ? 76 : 100,
marginTop: Platform.OS === 'ios' ? 0 : 24,
...Platform.select({
ios: { backgroundColor: '#f00', paddingTop: 24},
android: { backgroundColor: '#00f'}
}),
alignItems: 'center',
justifyContent: 'center'
},
text: {
color: '#fff',
fontSize: 24
}
});
Is there any other common things to handle for IOS platform? Like status bar or tab navigation or icon?
You can use SafeAreaView instead of View for wrap.
for example:
render() {
return (
<SafeAreaView>
<View style={{backgroundColor: 'red'}} />
</SafeAreaView>
);
}
If you wrap with View then the header will cutted when you are using iPhoneX since iPhoneX has different UI with others.
And also there are some other things different in style.
In iOS you should add overflow: 'hidden' for borderRadius. Means, you can only use borderRadius in Android but you can see the circular border after add overflow: 'hidden'. And I think the backgroundColor will works in Text component in Android but not in iOS.
Then you should care about Alert.alert in iOS. in Android you can normally use Alert and setState in the same time. But if you use Alert and setState in the same time then alert disappear right after show. For break down this you can use like this.
setTimeout(() => {
Alert.alert('info', 'Testing');
}, 100);
this.setState({spinner: false});
You can check this will works well in iOS too.
Is there a way to add a clickable icon along with StackNavigator objects?
This is a working code and it will show a "createBottomTabNavigator" with only one icon that will lead to "OtherScreen" on press.
const OtherStack = createStackNavigator({
Other: OtherScreen,
});
OtherStack.navigationOptions = {
tabBarLabel: 'Other',
tabBarIcon: ({
focused
}) => (
<TabBarIcon focused={focused} name='archive' />
),
};
export default createBottomTabNavigator({
OtherStack
});
I would like to add a share icon to the same "createBottomTabNavigator" so it will be aligned with all other icons but I don't want it to lead to a different screen. I just want it to open a share dialog.
I can't find a solution for this. Is it possible at all? Can someone help please?
You can add a button to the tab bar that doesn't lead to another screen by overriding tabBarOnPress for the route. Here's an example: https://snack.expo.io/#notbrent/playful-almond
The important part is here:
Placeholder: {
screen: () => null,
navigationOptions: {
tabBarOnPress: ({ navigation, defaultHandler }) => {
// don't call default handler!
alert('pressed placeholder!');
},
},
},
I have encountered a problem porting my app from iOS to android. I have built a minimal bug case with which it can be reproduced.
My app is very simple and consists of one component:
const Main = () => (
<View>
<View style= {styles.green}>
<View style={styles.blue}/>
</View>
</View>
)
export default Main;
const styles = StyleSheet.create({
green: {
height:200,
marginTop: 200,
backgroundColor: 'green',
},
blue:{
position:'absolute',
height: 100,
width: 100,
top: -50,
backgroundColor: 'blue',
},
})
But strangely this component renders differently on iOS and Android
iOS
Android
I would like it to render like on iOS on both devices. You can check code on this repo https://github.com/42void/ReactNativeBug to easily reproduce it.
Thank you!
In Android overflow property defaults to 'hidden' and cannot be changed.
From 0.23 known issues, apparently isn't fixed yet.