I am creating a chat app and I wanted to have a custom header. I am using React Navigation that is working fine and the header is functioning properly but not styling properly. I am using React Native Paper for custom header. My code is ( just copied from website to make sure that everyone thing works fine which obviously not ):
<Appbar.Header>
<Appbar.BackAction />
<Appbar.Content title="Title" subtitle="Subtitle" />
<Appbar.Action icon="magnify" />
<Appbar.Action icon="dots-vertical" />
</Appbar.Header>
It is supposed to work like this:
But on my Android Device it look like this:
Add some padding to the Appbar.Header like this:
<Appbar.Header style={{padding:40}}>
<Appbar.BackAction />
<Appbar.Content title="Title" subtitle="Subtitle" />
<Appbar.Action icon="magnify" />
<Appbar.Action icon="dots-vertical" />
</Appbar.Header>
Working Example on Snack
Related
I need to customize react-toastify.
I tried to follow the advice from the documentation and change the styles in the .scss file. unfortunately this didn't work. tell me what am I doing wrong?
I want notifications to look like on the picture how I want it to look
You can use this method in App.js :
<ToastContainer
position="bottom-right"
autoClose={8000}
pauseOnHover={true}
draggable={true}
theme="dark"
/>
here the toast appears on the bottom-right side, it is automatically closed after 8 seconds and its background theme is dark.
Add a style attribute like this:
<ToastContainer
position="bottom-right"
autoClose={8000}
pauseOnHover={true}
draggable={true}
theme="dark"
style={{width: "100px"}}
/>
I'm create a custom toolbar for my Data Grid with the following structure :
return (
<GridToolbarContainer>
<GridToolbarColumnsButton />
<GridToolbarFilterButton />
<GridToolbarDensitySelector />
<GridToolbarExport />
</GridToolbarContainer>
);
All the components work normally but the GridToolbarExport is now telling this :
error from typescript
i updated my version to this one :
"#material-ui/core": "^5.0.0-alpha.37",
"#material-ui/data-grid": "^4.0.0-alpha.32",
am i missing something ?
thanks!
I upgraded to Material-UI v5 and ran into this issue as well. I managed to get it working by passing in "props: any". I'm still not sure the correct type Module Augmentation to get this going for Typescript. Additional help would be great.
function CustomToolbar(props: any) {
return (
<GridToolbarContainer>
<GridToolbarColumnsButton />
<GridToolbarFilterButton {...props} />
<GridToolbarDensitySelector />
<GridToolbarExport {...props} />
</GridToolbarContainer>
);
}
What am I trying to achieve
I am currently facing a styling issue at the TextInput from react-native.
What I am trying to achieve is to display an icon within the TextInput.
Current situation
Creating a TextInput with the following code.
<TextInput
placeholder={translationStrings.searchPlaceHolder}
style={styles.searchStyling}
/>
This looks like below:
Current situation
What am I trying to achieve:
Wished situation
Does someone have any idea how to do this?
This is how ive achieved it
searchBar = () => {
return (
<View style={{ flexDirection:'row' , alignItems:'center'}}>
<TextInput
placeholder="Search your issues "
keyboardShouldPersistTaps
onChangeText={text => this.props.chnageInputText(text.toLowerCase())}
/>
<Image
style={faqStyles.imT}
source={require('../assets/images/maglass1.png')}
/>
</View>
);
};
This is how ive made a custom searchbar by wrapping an image and textInput in a View >ill always prefer using custom made components rather than libraries external. Try this and hope it helps. feel free for doubts.
Please see the below image, this is what ive achieved. ive reversed the elemnts like text input and magnifying glass image for you.
import {Item,Input} from 'native-base'
<Item>
<Input>
</Input>
<TouchableOpacity>
<Icon></Icon>
</TouchableOpacity>
</Item>
using native-base use input instead of textInput.
Otherwise just use a view with flexDirection:'row'
I'm creatting web app with React Leaflet. How I can transfer marker popup to react-leaflet-sideatabs
Local machine with react (windows 10)
<Sidebar
id="sidebar"
position="right"
collapsed={this.state.collapsed}
closeIcon={<FontAwesomeIcon icon={faAngleRight} />}
selected={this.state.selected}
onOpen={this.onOpen.bind(this)}
onClose={this.onClose.bind(this)}
>
<Tab
id="markerinfo"
header="Information"
icon={<FontAwesomeIcon icon={faInfoCircle} />}
>
// I need to transfer marker information here
</Tab>
</Sidebar>
Not sure if I understand the question. But I think the answer is simply React state. Say you have a marker and only the title is kept in state, you can take it anywhere for that matter.
See this sandbox example.
https://codesandbox.io/s/react-sidebar-marker-wknsp
Note: the example from that sidebar GitHub page was not working with my styling/etc on code sandbox.io so slightly adapted.
I use react native to make app in android. and I use react-native-scrollable-tab-view, when I use two tabbar in the view .one is on top, the other is in bottom.But when I click one only display half screen. I want got the full screen. Thank you for your help!!
currently:enter image description here
I want to get:enter image description here
bellow is my code:
render(){
return (
<ScrollableTabView
renderTabBar={() => <DefaultTabBar
backgroundColor='#61b754'
style={styles.top}
/>}
tabBarUnderlineColor='#fbc14a'
tabBarActiveTextColor='#ffffff'
tabBarInactiveTextColor='#ecf0f2'
scrollWithoutAnimation={true}
tabBarTextStyle={styles.navText}
>
<View1 style={styles.navText} tabLabel="菜单1" />
<View2 tabLabel="菜单2" />
<View3 tabLabel="菜单3" />
</ScrollableTabView>
<ScrollableTabView
renderTabBar={() => <DefaultTabBar
backgroundColor='#61b754'
style={styles.top}
/>}
tabBarUnderlineColor='#fbc14a'
tabBarActiveTextColor='#ffffff'
tabBarInactiveTextColor='#ecf0f2'
scrollWithoutAnimation={true}
tabBarTextStyle={styles.navText}
tabBarPosition='bottom'
>
<View5 tabLabel="菜单5" />
<View6 tabLabel="菜单6" />
</ScrollableTabView>
</View>
)
}