When using react-native-pdf and the example uri provided it does not appear in my app. A loading bar is only displayed. Does anyone know what may be causing this issue?
Loading bar displayed underneath messages:
Code below:
return <SafeAreaView style={{ flex: 1}}>{chat}
<View style={styles.container}>
<Pdf
source={{uri:'https://samples.leanpub.com/thereactnativebook-sample.pdf',cache:true}}
onLoadComplete={(numberOfPages,filePath)=>{
console.log(`number of pages: ${numberOfPages}`);
}}
onPageChanged={(page,numberOfPages)=>{
console.log(`current page: ${page}`);
}}
onError={(error)=>{
console.log(error);
}}
onPressLink={(uri)=>{
console.log(`Link presse: ${uri}`)
}}
style={styles.pdf}/>
</View>
</SafeAreaView>;
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'flex-start',
alignItems: 'center',
marginTop: 25,
},
pdf: {
flex:1,
width:Dimensions.get('window').width,
height:Dimensions.get('window').height,
}
});
Related
I'm currently trying to dynamically display different rows of buttons that are evenly spaced out from each other. In my code, two rows have five buttons each, and the third row has only two buttons. Since both buttons are being created using the same component, I was wondering if there was any CSS to help me do this properly.
Currently, here is the code for my the button component:
const NodesOptionButton = (props) => {
const styles = StyleSheet.create({
bold: {
fontWeight: '800',
},
textWrapper: {
width: 60,
height: 60,
borderWidth: 1,
borderStyle: 'solid',
borderColor: '#000',
padding: 12,
marginVertical: 8,
backgroundColor: props.isActive ? '#000' : '#fff',
alignItems: 'center',
justifyContent: 'center',
},
activeTextColor: {
color: '#fff',
}
});
And I'm rendering the three rows of button through this code:
const NPage = (props) => {
const styles = StyleSheet.create({
nodeOptionsContainer: {
flexDirection:'row',
backgroundColor:'red',
display: 'flex',
justifyContent: 'space-evenly',
},
});
//lots of code with logic
return (
<React.Fragment>
<View style={styles.nodeOptionsContainer}>
{nodeNumberOptions}
</View>
<View style={styles.nodeOptionsContainer}>
{clincallyOccultOptions}
</View>
<View style={styles.nodeOptionsContainer}>
{MSIOptions}
</View>
</React.Fragment>
)
Is there any suggestions, or would I have to create a new component for that specific button? Thanks!
You want the two last buttons to take up the whole row? You can always try to add:
flex-grow: 1
to your button component.
If you want your buttons to always take up the whole row, you should just need to add flex: 1 to your Button component root View, and you don't need space-evenly in the parent.
If that's not the case, maybe you should post a pic of the desired design and the current design with problem. It helps understand.
p.s: another tip for performance...define your style outside your component.
I have a problem with styling 3 nested components.
Background:
I want the user to enter tags. On testing it became clear, that many user, didn't know that they have to press space to save the tag (a problem, when a user only wants to enter one tag).
As a solution, as soon as the user presses on the textinput I want to display a trailing hint, to press space to save (leertaste zum speichern = space to save), which is displayed after the userinput.
The problem is as seen on the gif
https://gfycat.com/harmoniousgorgeousdikkops
The textinput grows and the hint stays behind the text, as expected, but at some point my hint is leaving the container component, while my textinput behaves normally.
Expected behavior is that the hint is always visible and the textinput grows as long as this is given (thus never pushing the hint out of the screen, or changing it's design). Visually it is when I pause during the gif.
Code:
<View
style={{
flexDirection: 'row',
backgroundColor: COLOR_GREY_BACKGROUND,
borderRadius: BORDER_RADIUS,
height: TEXTINPUT_HEIGHT,
marginRight: MARGIN_TO_DISPLAY_EDGE,
width: DIMENSION_WIDTH - 2 * MARGIN_TO_DISPLAY_EDGE,
flexWrap: 'nowrap',
}}
>
<Text
style={{
fontSize: FONT_SIZE_TEXT_INPUT,
...FONT_OPENSANS_SEMI_BOLD,
paddingTop: 1,
paddingRight: 0,
marginLeft: 5,
}}
>
#
</Text>
<View style={{ flexDirection: 'row', flex: 1 }}>
<TextInput
style={[styles.textInputText]}
placeholder={placeholder}
onChangeText={(text) =>
onChangeText(text.toLowerCase())
}
value={value}
autoCapitalize="none"
autoCorrect={false}
onFocus={() => setTextInputFocus(true)}
/>
<View style={{ justifyContent: 'flex-end' }}>
<Text
style={[
styles.textInputText,
{
paddingLeft: 0,
fontSize: FONT_SIZE_SECONDARY_TEXT,
color: COLOR_GREY_TEXT_BACKGROUND,
},
]}
>
{T('spaceToSave')}
</Text>
</View>
</View>
</View>
the missing style :
textInputText: {
fontSize: FONT_SIZE_TEXT_INPUT,
...FONT_OPENSANS_SEMI_BOLD,
//paddingRight: TEXTINPUT_PADDING,
paddingTop: TEXTINPUT_PADDING,
}
(The # is added so its clearer for the user what to do without having him to enter it). Should it be unclear, what I am trying to do, please let me know.
Thanks a lot for your help!
I'm facing a little problem with the header included with the stackNavigator in react-native.
The header title default style seems to be set as alignSelf: start, however, i can't change it to center in my application.[![Header is not centered][1]][1]
https://i.stack.imgur.com/1Ih7Q.png
Here is the code for my routes section:
import * as React from 'react';
import {createStackNavigator} from '#react-navigation/stack';
import {NavigationContainer} from '#react-navigation/native';
import Main from './pages/Main';
import User from './pages/User';
const Stack = createStackNavigator();
export default function Routes() {
return (
<NavigationContainer>
<Stack.Navigator
initialRouteName="Home"
screenOptions={{
headerStyle: {backgroundColor: '#7159c1'},
headerTintColor: '#fff',
headerTitleStyle: {
alignSelf: 'center',
alignItems: 'center',
color: '#fff',
},
}}>
<Stack.Screen name="Home" component={Main} />
<Stack.Screen
name="User"
component={User}
options={({route}) => ({title: route.params.user.name})}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
I don't know exactly why what you did doesn't work, but try to add headerTitleAlign: 'center' property to screenOptions (not to headerTitleOptions inside screenOptions)
In my case I was using react-navigation version 4 EXPO, So I use
headerTitleStyle : { marginTop: Platform.OS == 'ios'? 12:5, textAlign: 'center', width: '90%' },
I use textAlign: 'center' and width: '90%' under headerTitleStyle.
And it works Fine for me.
I am not sure that it will work for with others versions.
I'm trying to create something like this:
The sections labeled with Dates, Time are where my the data from my dates and timeSpan will go. The red area is where my calendar would be placed.
I have been trying to fit Views to look like tables, but it has not been working out so well. Here's my code:
<ScrollView>
<View>...</View>
<View **
style={{
marginHorizontal: 10,
marginTop: 10,
flex: 1,
borderColor: Colors.separatorColor,
borderWidth: StyleSheet.hairlineWidth}}>
<View style={{
flex: 1,
flexDirection: 'row',
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: '#EDEDED'}}>
<View style={{1, backgroundColor: '#ff0000'}}/>
{
dates.map((date, i) => {
<View key={i} style={{
flex:1,
backgroundColor: '#00fff0',
borderRightColor: '#EDEDED',
borderRightWidth: StyleSheet.hairlineWidth}}>
<Text>{date}</Text>
</View>
})
}
<View style={{flex: 1, backgroundColor: '#ff0000'}}/>
</View>
{
timeSpan.map((time,i) => {
<View style={{
flex: 1,
flexDirection: 'row',
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: '#EDEDED'}}>
<View style={{flex: 1, backgroundColor: '#ff0000'}}/>
<View style={{flex: 1, backgroundColor: '#ff0000'}}/>
</View>
})
}
</View>
<View>...</View>
</ScrollView>
The <View>...</View> is the code for Other Stuff that will just make my question look much longer so I cut it out. I'm trying to make the <View>s look like a table which have dates.length columns and timeSpan.length rows.
The issue right now is that nothing appears on my screen when I give flex: 1 to my View that I marked in the code with **. However, if I give it a fixed height such as height: 260, then I get one big fat red box instead of seeing many Views that would make up my custom calendar.
I have put in static data to dates and timeSpan and checked by logging that the iterations are done over these arrays so I am confident that the rows and columns are being created but they are not shown on the screen.
How would I resolve this issue which I believe is caused by the flex values?
EDIT:
here's a snack example of my app:
<div data-snack-id="#ohnu93/tenacious-marshmallows" data-snack-platform="ios" data-snack-preview="true" data-snack-theme="light" style="overflow:hidden;background:#fafafa;border:1px solid rgba(0,0,0,.08);border-radius:4px;height:505px;width:100%"></div>
<script async src="https://snack.expo.io/embed.js"></script>
I'm trying to align Views in React Native, and I want that every View is 50% of the screen. Something like :
My state is :
this.state = {
companies: [
{logo_url: require("../../../img/company_logos/ald.png")},
{logo_url: require("../../../img/company_logos/arval.png")},
{logo_url: require("../../../img/company_logos/businesslease.png")},
{logo_url: require("../../../img/company_logos/dieterenusedcars.png")},
{logo_url: require("../../../img/company_logos/psa.png")},
{logo_url: require("../../../img/company_logos/remarketing_center.png")},
{logo_url: require("../../../img/company_logos/vdfin.png")}
]
}
And then in the render method :
render(){
return (
<View style={{flex: 1, flexDirection: 'row'}}>
{this.state.companies.map(company => {
return (
<View style={{width: Dimensions.get('window').width * 0.5, height: 150}}>
<Image source={company.logo_url} style={{width: Dimensions.get('window').width * 0.5, height: 100}}/>
</View>
);
})}
</View>
)
}
But I see only first two logos.
All items are probably shown in one row instead of going to second row if there is no more place on the screen.
Any advice?
In case somebody else has the same problem.
I solved it by adding flexWrap: "wrap" to the parent View
<View style={{flex: 1, flexDirection: 'row', flexWrap: "wrap"}}>