I want to create a summary page in react native with different items, which will be displayed through slider with card. Im using intro slider library.
I dont want to set the title and content with static text, but everything has to come from server as JSON data and map items to card.
like
content = [{"title": "Title 1", "item1":"value1", "item2":"value2"},{"title": "Title 2", "item1":"value1", "item2":"value2", "item3": "value3"},....]
render()
{ map(contents) =>item( implement card here and return)
}
What is best way to do this?
Need help with deciding json format and rendering it with map. No of items in each page, and it's name wont be be same always.
It should be a generic slider card which can display any title and items of any length and content.
Considering your case, I have developed a solution for you. Please try the following:
{contents.map((item, index) => (
<View key={index}>{item.index}</View>
))}
If this doesn't work then try
{contents.map((item, index) => (
<View key={index}>{item[index]}</View>
))}
This solution work regardless of the property name.
Related
iam having a text string with characters like "__"(two underscores) in the string whenever i encounter the two underscores i want to replace them with a specific view like box and render it so for example:
str = "iam __ and i want to go to __"
so i want to render iam (want to render rectangular box here) and i want to go to (rectangular box here)
i have tried using the split function in js and split them by __ and tried pushing the jsx to array based on condition but it was rendering in different lines is there any better way to do it
code i tried:
const stringsArr = str.split('__');
const toRender = []
for(let i=0;i<stringsArr.length;i++){
toRender.push(<Text styles={styles.emptyBlock} />)
toRender.push(<Text>{stringsArr[i]}</Text>)
}
Components will render below each other by default. Wrap a View around each text line and give it a style of flexDirection: 'row' so that they render side by side. If you want it working like a paragraph, then apply flexWrap: 'wrap' as well.
I'm interested in determining if its possible for me to completely customize the drop-down that appears in response to a user typing text into a select2 text field (using the react-select component).
I want the text to generate output similar to what appears in Apple's Spotlight OS feature (see screenshot - in which I typed the text 'mini').
Is this possible using react-select and if so - how ? Are there samples ?
I found this repo ( https://github.com/bvaughn/react-virtualized-select/ ) which seems like it supports what I want to do - but its no longer supported.
Thanks
Dave
Of course you can customize the contents of the dropdown with the components framework implemented into react-select. You have to overwrite the Menu component to add new content to the dropdown. You might also have to set some styles with the styles api.
const Menu = ({ children , ...props }) => {
return <components.Menu>
<div> My custom content </div>
{children} // This contains the `MenuList` component with the options
</components.Menu>
}
<Select
{ ... }
components={{
Menu
}}
/>
To achieve something like Apples Spotlight feature you have to do some more advanced customisation. This example shows a basic implementation of how you could do it.
Background Transparency with BLUR
Is it possible to blur view without using background Image? I want to show the parent content on top of the background blur view in modal.
Similar kind of this:
Tried with react-native-blur :
Its actually blurring the background image. I want to blur and show the content which is behind the modal.
Tried along with react-native-overlay : But no change.
well if you are
using expo
then you should go and check out this link here
else if you are like me
who loves to use 'react-native init' and want some blurry effect based views then i have this for you!
https://github.com/voronianski/react-native-effects-view
an awesome library
it would be very simple to use it like
"if the dialogbox is open then render The blur view else render simple",
here is a simple example for basic how to use!
...imports
var EffectsView = require('react-native-effects-view');
var App = React.createClass({
renderVibrant() {
return (
<View>
<Text style={styles.text}>Do you feel blurry??</Text>
</View>
);
},
render() {
return (
<EffectsView
style={styles.view}
blurStyle="dark"
vibrantContent={this.renderVibrant()}
>
<Image style={styles.bg} source={require('image!bg')} />
</EffectsView>
);
}
});
In React Native, is there a way to toggle visibility of an element?
For example:
<Text visibility={this.state.isVisible}>Visibility depends on state</Text>
this might be crude but it works.
under render
var visibletext = null;
if (this.state.isVisible) {
visibletext = (<Text>Visibility depends on state</Text>);
}
then, under return part
<View style={styles.container}>
{visibletext}
</View>
There are various ways to do this. See the Conditional Rendering guide at the React.js website, which explains different options.
One simple way is to use the && operator inline:
{this.state.isVisible &&
<Text>Something</Text>
}
Note that with the conditional rendering approach, if you have (for example) some views centered vertically, this views will suddenly move up or down when the text appears (to give room for the new view). Another approach that avoids this jump is to either change the text color or set the text to empty string:
// Change the text color
<Text style={this.state.isVisible ? {color: 'black'} : {color: 'white'}}>Something</Text>
// Set text to empty string
<Text>{this.state.isVisible ? "Something" : ""}</Text>
Changing the color of the text is the best way to make sure that the other views don't suddenly move when showing the text, given that the text is already occupying the layout space it needs.
I did not put any undefined variables in the view but it appear some Unknow tags,so I wonder what is Unknown there?
<View>
<View style={styles.row}>
<Text>{rowData.user.name}ยท {rowData.createdDate}</Text>
<Text>{rowData.title}</Text>
</View>
<View style={styles.separator} />
</View>
in chrome I seen between the View and Text there is a Unknown.
I wonder if this is due to text nodes in your code, specifically white space like tabs and newlines. Please see this issue from the react dev tools:
https://github.com/facebook/react-devtools/issues/44
There are several such issues on the devtools tracker, sometimes related to a lack of displayName on components but I don't see how that applies here.
Suggest opening an issue on the React Native Github tracker as I doubt this is expected. Someone on the RN team might be able to give us a better explanation.
Did you define Text and View?
At the top of your file you should have something like this,
ES6
var {
View,
Text,
} = React;
ES5
var View = React.View;
var Text = React.Text;