I get the below error on iOS as a dismissable error. (pressing esc button hides the error and shows my app.)
Invalid YGDirection 'row' should be one of: (inherit, ltr, rtl) -
React Native
I am using styled components on my project but I don't think this error caused by the component.
Since react-native uses flex layout, we should be able to use the flex-direction attribute.
My wrapper component is below:
const Wrapper = styled.View`
flex: 1;
align-items: ${props => props.align};
justify-content: ${props => props.justify};
flex-direction: ${props => props.direction};
flex-grow: ${props => props.grow};
flex-shrink: ${props => props.shrink};
`;
Wrapper.defaultProps = {
direction: 'column',
align: 'flex-start',
justify: 'flex-start',
grow: 1,
shrink: 0,
};
Am I missing something?
The full error is something like below:
I faced the same problem and solved it after few hours.
Search for any Text component with direction prop in it.
<Text direction={value} />
change it to
<Text dir={value} />
or any prop name you like
Base on your code, it would be in your Wrapper with the prop name direction.
if you using nativebase and get the same error,
find the <Flex></Flex> tag that have direction="row" options, comment that options will solve the error,
you can also replace <Flex></Flex> with <HStack></HStack> if you want to achieve a similar result
I faced a similar issue in my RN project. For me, the issue occurred because of flex-direction.
If you are using flex, instead of direction, it should be flexDirection.
So instead of:
<Flex direction="row"></Flex>
Do this:
<Flex flexDirection={"row"}></Flex>
This solved my issue.
Related
I'm using the react-native-elements ui framework with ThemeProvider and trying to globally style the text of a component like this...
<ListItem bottomDivider>
<ListItem.Title>Name</ListItem.Title>
<ListItem.Input>DoB</ListItem.Input>
</ListItem>
I want to style this <ListItem.Input> text color red. So I've tried a ton of things similar to the code below, but I can't get anything working. Any ideas?
ListItem: {
inputStyle: {
color: "red"
}
}
I'd prefer to keep the styling global and not to do it inline, if possible.
You have to use ListItemInput
ListItemInput:{
style:{}
}
I'm trying to throw together a simple phone app mockup using React Native & React Native Elements as a set of UI components. I want to set the styling of various elements to a common theme, so I'm following the example in the documentation: https://reactnativeelements.com/docs/customization#using-themeprovider.
But the trouble with the example there (as it says in the docs), it sets the style of all buttons. What I'd like to do is to set the background colour of only the solid buttons for example, leaving the clear buttons, clear! Can anyone point me in the right direction of how to do this?
Current snippet (trimmed to save space):
const myTheme = {
Button: {
buttonStyle: {
borderRadius: 4,
backgroundColor: '#03E0EE',
},
titleStyle: {
color: '#180D43',
},
},
};
...
<ThemeProvider theme={myTheme}>
<View style={styles.footerContainer}>
<Button title="Primary Button"/>
<Button title="Secondary Button" type="clear" />
</View>
</ThemeProvider>
Create a wrapper component for SolidButton and or ClearButton. Make this wrapper components consuming the myTheme context with style props (e.g. ButtonSolid\ButtonClear). AFAIK there are no selector capabilities like in css.
I am trying to integrate a component with the following Code:
<!-- ScheduleOnce embed START -->
<div id="SOIDIV_MohamadElBaba" data-so-page="MohamadElBaba" data-height="550" data-style="border: 1px solid #d8d8d8; min-width: 290px; max-width: 900px;" data-psz="00"></div>
<script type="text/javascript" src="https://cdn.oncehub.com/mergedjs/so.js"></script>
<!-- ScheduleOnce embed END -->
The goal is to have the app display the component.
I am using react-native and expo, but when I run the project no errors are logged. The component is simply not appearing.
Can someone give me an idea about whats going on?
Full code: (react-native / expo App.js)
import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View } from "react-native";
export default function App() {
return (
<View>
<h1>App Loaded</h1>
<div
id="SOIDIV_MohamadElBaba"
data-so-page="MohamadElBaba"
data-height="550"
data-style="border: 1px solid #d8d8d8; min-width: 290px; max-width: 900px;"
data-psz="00"
></div>
<script
type="text/javascript"
src="https://cdn.oncehub.com/mergedjs/so.js"
></script>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
As react native doesn't use the DOM like regular react does, you can't use HTML tags such as div, h1 etc. My assumption would therefore be that you need to use this WebView component to do that. You would then need to set the source prop equal to your html code. You should end up with something like <WebView source={{html: '<h1>App Loaded</h1><div.....'}}. Or even better, if you have the actual uri for the embedded code, you can just do <WebView source={{uri: 'the uri to the page'}} />
https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#source
This links to the deprecated project page, but it provides an actual code example, and the syntax should be the same between this old version and the newest version. Just remember to add the package referenced in the github link opposed to this one https://reactnative.dev/docs/webview#source
The release 2.1.3 of react-admin introduced the use of <Typography /> for the NumberField component (and others) in place of <span />.
This component has a style to align text on the right.
const styles = {
input: { textAlign: 'right' },
};
I don't know why, but with the span element the number was aligned left.
Now the number is aligned right, but not aligned with the same margin if there are others number fields.
Code demo (Comment show screen) / Screenshot
I tried to define a className on my component...
<NumberField source="id" className="leftalign" />
with
.leftalign {
text-align: left;
}
...but the class is overridden by the style-generated class NumberField-input-234 (except if I set !important but I would like to avoid this).
My questions are:
Is there a way to align them on the left without the uggly !important css flag or writing style={{ textAlign: 'left' }} each time I use a <NumberField />?
Is there a way to align right with the same margin?
Thanks
This issue has been resolved in react-admin#2.2.0
I'm using react-native-navigation to show error notification dropdowns via 'showInAppNotification'.
I've tried to style the dropdown box with:
{
backgroundColor: colorRed,
flex: 1,
alignSelf: 'stretch',
}
I can't get the box to obey that flex call. It stays as the width of the text inside the notification.
That is, what I get is this:
And what I want is this:
(The second is achieved by setting a hard width of 999, but that isn't a satisfactory solution)
So, from my limited understanding of React Native's stylesheet logic, I assumed I had a parent element with a fixed width above the notification. Except I don't. It's called directly (well, unless I'm missing some sort of injected showInAppNotification component) into my Provider HOC, which looks like this:
<Provider store={store}>
<ErrorBoundary>
{children}
</ErrorBoundary>
</Provider>
To confirm the ErrorBoundary was fullscreen width, I threw a backgroundColor: green on the error boundary. It came back as the expected width, like this:
Any thoughts on what could be going on? As mentioned I'm new to react native & it's possible I'm missing something obvious w/regards to flex logic, but I suspect it's a react-native-navigator notification issue I'm hoping others have run into. Any thoughts appreciated.
Instead of giving your width a hard-coded value you can import react native's Dimensions class into your component and use it in order to set the width.
So, your code can look something like this:
import { ...., Dimensions } from 'react-native';
const { width } = Dimensions.get('window');
const styles = {
notification : {
backgroundColor: colorRed,
width,
alignSelf: 'stretch'
}
}