I am using line chart for showing data. It working absolutely fine but if my data has negative value in that condition my chart is cutting from bottom.
You can see my error in above image which marked with red color.
I used react-native-pure-chart - below link :-
https://www.npmjs.com/package/react-native-pure-chart
<PureChart type={'line'}
numberOfYAxisGuideLine={0}
data={this.state.sampleData}
width={'100%'}
height={72}
backgroundColor={'#2c3554'}
color={'#2c3554'}
/>
My data is [10,-2,6]
Please help me. Thank you in advance
I got the solution.
Use react-native-svg-chart (Linechart).
It will solve the issue.
Below is my code :-
import { LineChart } from 'react-native-svg-charts'
<LineChart
style={{ flex: 1, marginLeft: 4 }}
data={this.state.sampleData}
svg={{ stroke: 'rgb(211, 234, 250,0.7)' }}
contentInset={contentInset}
/>
Related
I've a Text nested in a View, I would like that the Text autoresize itself getting only the effective required space, but this seems to be impossible...
This is the link to the snack I've done:
https://snack.expo.dev/#david92/flexshrink-text
I would expect the green block to end immediately after the words "very" and "word"...
How can I change the current behavior?
This is a screenshot of the current result...
Change your code in your container style to this.
container: {
alignSelf: 'flex-start',
backgroundColor: "red",
},
I'm looking to create animations similar to those on this page as each element comes into view, except they would slide in from the left/right.
I've done things like this with React previously with framer motion like this:
<motion.div
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
transition={{ duration: 0.3, delay: 0.5 }}
variants={{
visible: { opacity: 1, x: 0 },
hidden: { opacity: 0, x: 50 }
}}
>
content
</motion.div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
I can't seem to find a similar equivalent in React Native though. Does someone have a code sandbox and/or a npm package that can help with this?
Thanks
You could try react-native-animatable.
This would look something like this:
<Animatable.View
animation="bounceInLeft"
duration={600}
>
<Text >
Animation Example!
</Text>
</Animatable.View>
);
You can go with react-native-reanimated, and use entering LayoutAnimation.
I think this is one of the best, cuz almost every project has reanimated library, and these animations runs on the UI thread.
Quick note: As I know, the LayoutAnimation fundamentals is in rewriting phase right now.
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 want to acomplish this : https://i.stack.imgur.com/NNrP3.png ,
Current situation is : https://i.stack.imgur.com/s1rI5.png ,
I am unable to create that grayish line over every tab, and my actual orange indicator will go over that gray line when im moving thru my navigator.
Thanks for all the help.
At the end i figure out how to do it and here is an example if anyone have same problem :
tabBarOptions={{
activeTintColor: getThemeColor("white", app.appTheme),
style: {
backgroundColor: getThemeColor("background"),
elevation: 0,
borderBottomWidth:_generalSize(1),
borderBottomColor: getThemeColor('textInputPlaceholder'),
},
I just put inside tabBarOptions style: and then i put normal border botom.
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'
}
}