I'm new to js, react and css so this is going to be very basic but it's not to me. I have these containers and I'm trying to put a text field inside one of them but I'm getting syntax error at Text. Does it have something to do with < > />? Thank you
<View style={styles.top}
/>
<MapView style={styles.map}
region ={{
latitude:lat,
longitude:long,
latitudeDelta: 0.1,
longitudeDelta: 0.1,
}}
>
</MapView>
<View style={styles.bottom} />
</View>
);
Indeed it does. You need to close your jsx View tag.
<View style= {styles.container}>
<View style={styles.top}>
<Text> Hi there</Text>
</View>
</View>
The render method can only render a single root node i.e you only define one parent root in render method.
You can define multiple child root under one parent.
Related
I have a component that is passed as a label prop. I need to add width: 100% for it because otherwise, I cannot use justify-content: space between for my div. Here is how it looks like in developer tools.
return (
<div className={classes.row}>
<Checkbox
value={deviceId}
className={classes.checkbox}
checked={Boolean(selected)}
onChange={handleToggle}
label={
<div>
<Tooltip title={t('integrations.deviceEUI')} placement={'top-start'}>
<Typography variant="body1" className={classes.item}>
{deviceEui}
</Typography>
</Tooltip>
<Tooltip title={t('integrations.deviceName')} placement={'top-start'}>
<Typography variant="body1" className={classes.item}>
{name || ''}
</Typography>
</Tooltip>
</div>
}
/>
</div>
);
};
I'm not sure I fully understand the issue, but if you want to simply add styles to a React component, you can simply do the following:
cont labelStyle = {
width: '100%'
};
Then inside your return statement, you could attach this labelStyle to the parent <div> like so:
<div style={labelStyle}>
//other components
</div>
If this isn't what you really mean, then please consider outlining the issue a little more clearly, thanks!
In React Native version of this problem, you can simply give the "style" prop to the component as:
const NewComponent = ({style}) => {}
and now you are able to reach to the "style" prop from another file.
Now, "style" prop is available to use in "NewComponent", write the following code:
<NewComponent style={{}}/>
I want to capitalize all text in my muiv5 project. It should be default to capitalize unless stated in sx or styled on the component itself.
What I've tried is:
<ThemeProvider theme={theme}>
<IntlProvider
locale="en"
defaultLocale="en"
messages={AppLocale.en.messages}
>
<CssBaseline />
<GlobalStyles styles={{ root: { textTransform: "capitalize" } }} />
<Component {...pageProps} />
</IntlProvider>
</ThemeProvider>
But it doesn't work. Any best way to do this? Even createTheme is not working for me.
Note: I don't want to use makeStyles. Using Next.js.
You can allow all the children of body to inherit the textTransform value.
<GlobalStyles styles={{ body: { textTransform: "capitalize" } }} />
I want to implement a 'grid' layout in my RN app, but as RN doesnt support grid style I'm confused about how can I do it.
I need to do something just like this:
Where blue and green boxes will be text inputs (numeric only) and the red box will be a picker.
Unfortunately, css isnt my best skill.
Can anyone help me? Thanks !
the simplest way would be to put a column inside a row, which you can do by using react-native stylesheet's 'flexDirection' property, like this:
<View style={{flexDirection: 'row'}}>
<View style={{flex: 1}}>
<Input style={{flex: 1}} />
<Input style={{flex: 1}} />
</View>
<Picker style={{flex: 1} />
</View>
I am using react-native-autocomplete-input component's <AutoComplete>
I inserted two icons at left(search) and right(close) of AutoComplete.
<View style={styles.searchSection}>
<AntDesign
name="search1"
size={18}
color="gray"
style={styles.searchIcon}
/>
<Autocomplete
autoCapitalize="none"
autoCorrect={false}
containerStyle={styles.autocompleteContainer}
inputContainerStyle={styles.inputContainer}
//data to show in suggestion
data={filteredFilms}
//default value if you want to set something in input
defaultValue={
JSON.stringify(selectedValue) === '{}'
? ''
: selectedValue.title + selectedValue.id
}
// onchange of the text changing the state of the query
// which will trigger the findFilm method
// to show the suggestions
onChangeText={(text) => findFilm(text)}
placeholder="Search doctors, specialities, symptoms"
renderItem={({item}) => (
//you can change the view you want to show in suggestions
<View style={{backgroundColor: 'red', flexDirection: 'column'}}>
<TouchableOpacity
onPress={() => {
setSelectedValue(item);
setFilteredFilms([]);
}}>
<Text style={styles.itemText}>{item.title + item.id}</Text>
</TouchableOpacity>
</View>
)}
/>
<AntDesign
name="close"
size={18}
color="gray"
style={styles.clearIcon}
/>
</View>
Without typing keys, UI looks fine as below:
But when I start to type, both search and close icons are pushed down to center of suggestion:
Any suggestion, how I can keep both icons fixed at it's top position.
Please help.
Please try attribute alignItems:'flex-start' in styles.searchSection.
For further alignment of icons, use padingTop: 10 in both searchIcon and clearIcon.
I am using this component: react select.
This is my situation:
screenshot
When I add more and more tags in such a way that they don't fit inside the select component anymore - you can see position of other components (which are located next to react select) like the black "X" button are not updated, e.g. the "X" component should move to the right since width of react-select has increased. However, it doesn't. Can someone tell me what is wrong?
This is how those components (each row) is created:
<div style={{ display: "flex", verticalAlign: "middle" }}>
<Checkbox style={{ marginTop: 9, width: 40 }} checked={data.checked}
onCheck={(e, value) => { this.updateTreeNodeCheckedById(data.id, value);}} />
<Select value={data.value} simpleValue placeholder={data.label} multi
style={{marginTop:"5px", width: "300px", maxWidth:"300px"}}
onChange={(value)=>{ this.updateTreeNodeValueById(data.id, value)}}
options={[
{value:0, label:"სატესტო1"},
{value:1, label:"სატესტო2"},
{value:2, label:"სატესტო3"},
{value:3, label:"სატესტო4"}
]} />
<IconButton onClick={() => { this.deleteTreeNode(data.id)}}>
<ClearBtn />
</IconButton>
</div>