I want to arrange the material top tab navigator name in a single line.
The first tab name is lengthy here, so it displays in two lines. Like this (img_1).
img_1
But I want to convert the name to a single line. Like this (img_2).
img_2
I suggest you to try this.
<Tab.Navigator
screenOptions={{
tabBarItemStyle: {
width: 'auto',
minWidth: '100',
alignItems: 'center',
},
}} >
I want to change the design of Mui Datagrid outline
from
to
I can't upload the code for some reason, is there any reference material or example code?
simplest way to customize the datagrid is using sx props. you can check all the available css rules on https://mui.com/api/data-grid/data-grid/#css
to remove datagrid border use .MuiDataGrid-root rule and inside it you can add border properties. I see you have removed column separator too. To do so use .MuiDataGrid-columnSeparator
if you check below code I have prefixed .MuiDataGrid-root with & sign. but haven't added & sign to .MuiDataGrid-columnSeparator. you can open your chrome developer tool and see if the associated CSS rule has any parent class attached to it or not. if it has any you can prefix the rule with &. this way you don't have to write full class rule.
<DataGrid
...
sx={{
'.MuiDataGrid-columnSeparator': {
display: 'none',
},
'&.MuiDataGrid-root': {
border: 'none',
},
}}
/>
Look at the Material UI Data Grid - Styling Page
https://mui.com/components/data-grid/style/
MUI Data Grid Header Styling
const columns: GridColumns = [
{
field: 'first',
headerClassName: 'super-app-theme--header',
headerAlign: 'center',
},
{
field: 'last',
headerClassName: 'super-app-theme--header',
headerAlign: 'center',
},
];
More examples with below link
https://mui.com/x/react-data-grid/style/
I am trying to import createStackNavigator from an external file and add it inside ImageBackground of View so that I can have common flow of backround image from top to bottom but I am getting errors like
TypeError: No "routes" found in navigation state
Code:
<View style={styles1}>
<ImageBackground source={{uri: 'https://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg' }} style={{width: '100%', height: '100%'}}>
<componentNavigator style={{ backgroundColor: 'transparent' }} navigation={navigation} />
<View></View>
</ImageBackground>
{/*</ImageBackground>*/}
</View >
To fix the above issue I added
static router = AccountsNavigator.router; // added it below constructor
Then I am getting Connot readt propery 'router' of undefined
I am not sure how to fix it, even if it fixed will it take the flow og background image?
I have found the solution, by adding headerTransparent: true inside navigationOptions, I can able to achieve transparent background though I had to position the below container with position: absolute
I'm starting to learn react native, therefore I'm following the documentation, however, I can not test the TextInput, I copy past the example from the official documentation but nothing appears in my app.
I also remarked that when I add other components they doesn't appears also, however, when I remove the TextInput they appears as expected.
I searched online for some solution, I find a lot, but non works for me ( mostly the talked about the height of the component...).
also there is no error neither in the app nor in the debugger-gui
does anybody have a solution?
Edit1
to get started with react I followed the instructions and create AwsomeProject,
then in the app.js (I also tried to create a separte component and call it in app.js) I added this code :
<View style={{ backgroundColor: 'red' }}>
<TextInput style={{ backgroundColor: '#ededed', height: 60 }} value={'Hello'} />
</View>
It's hard to know without a code example but are you importing TextInput at the top of the file?
import { TextInput } from 'react-native';
I think by adding flex:1 and onChangeText in the textInput will solve the issue
import * as React from 'react';
import {View, TextInput,Button} from 'react-native';
export default class App extends React.Component {
state={
text:"Hello"
}
render() {
return (
<View style={{ backgroundColor: 'red',flex:1,justifyContent:'center'}}>
<TextInput style={{ backgroundColor: 'red', height: 60,width:300 ,borderWidth:1,borderColor:"white"}} value={this.state.text} onChangeText={(text) => this.setState({text})}/>
<Button
title="Learn More"
color="#841584"
accessibilityLabel="Learn more about this purple button"
/>
</View>
);
}
}
Here is the full code of the simplest use of a TextInput.
import * as React from 'react';
// We have to import the components that we are going to use in our app.
// TextInput is a part of the 'react-native', which should be already installed if you have followed the official documentation correctly.
import {View, TextInput} from 'react-native';
export default class App extends React.Component { // Our main App component
render() {
return (
<View style={{ backgroundColor: 'red' }}> // The TextInput is in a view. This view has a red background. When you use the link below, you will see a red section at the top of the screen. That is our view.
<TextInput style={{ backgroundColor: 'red', height: 60 }} value={'Hello'} /> // This is the TextInput component, which has the text "Hello" in it. As you can see, it will be rendered in the parent red view.
</View>
);
}
}
Check out the live example in this link.
More:
React Native Getting Started on TextInput
Let me know if it doesn't clarify what you're trying to do!
To show text input on UI, You need to use flex concept or need to define width of text input.
or
The Text input is center aligned, how to fix this text input so that it takes input from top left corner
Here is my css for text input:
/* The Text input is center aligned, how to fix this text input so that it takes input from top left corner */
input: {
flex: 1,
padding: 4,
marginRight: 1,
marginTop: 5,
fontSize: 18,
borderWidth: 1,
borderRadius: 4,
borderColor: '#E6E5ED',
backgroundColor: '#F8F8F9',
justifyContent: 'flex-start',
height: 150
}
I had the same issue, but the above notes didn't solve it. There's an android-only style property textAlignVertical that fixes this issue on multiline inputs.
i.e. textAlignVertical: 'top'
TextInput has default padding, override it by setting:
paddingTop: 0,
paddingBottom: 0
Github Issue
I have found the solution that in Android, TextInput style textAlignVertical: 'top' works. but in ios, TextInput prop multiline={true} works.
The Above Answers either give the for iOS or android, which can be quite misleading so this fixes it for both of the platfoms.
<TextInput
style={{
flex: 1,
width: "100%",
height: 150,
color: "#FFF",
textAlignVertical: "top", // android fix for centering it at the top-left corner
}}
multiline={true} // ios fix for centering it at the top-left corner
numberOfLines={10}
/>
For Android -
style={{
//...
flex:1,
textAlignVertical: "top", // android fix for centering it at the top-left corner
//...
}}
For iOS, add
multiline={true}
to the <TextInput/> component
Give textAlignVertical : "top" that will solve your issue.
<TextInput placeholder="Your text post" multiline={true} numberOfLines={10}, maxLength={1000} style={{ borderWidth: 1, backgroundColor: "#e3e3e3", textAlignVertical : "top" }} />
I had a similar use case in my iOS app, wherein the TextInput's height was 100 and the placeholder was showing in middle. I used multiline={true} and it made the text appear from the top.
It worked for me (RN 0.61.5):
<TextInput style={{textAlignVertical:'top', paddingTop: 0, paddingBottom:0 }} />
Update 2015-07-03: multiline text inputs have now been merged:
https://github.com/facebook/react-native/pull/991
The multiline examples that ship with React Native in the UI Explorer should work as documented.
The problem you'll have is that multiline TextInput aren't working correctly yet, and the docs are misleading. Please see this Github issue:
https://github.com/facebook/react-native/issues/279
"We haven't ported that functionality to open source yet."
There is some code in that issue that gives minimal multiline functionality, so you might be able to get it working with that.
Just Incase you are looking for code:
<TextInput
placeholder={'comment goes here!'}
multiline
style={{textAlignVertical:'top', ...otherStyle}}
/>
import { Dimensions} from 'react-native';
const screenWidth = Math.round(Dimensions.get('window').width);
const screenHeight = Math.round(Dimensions.get('window').height);
// ...
intext: {
height:screenHeight - 10,
textAlignVertical: 'top',
fontSize:17,
padding:12,
fontFamily:'courier',
margin:10,
},
I found out per element inspector, that for iOS there is a paddingTop: 5 for multiline TextInputs. This was still applied even though I set paddingVertical: 15 for all of my inputs. The result was a not centered text in multiline inputs on iOS. The solution was to additionally add a paddingTop: 15 if the TextInput is multiline and the platform is iOS.
Now there is visually no difference between single line and multiline inputs on both platforms, Android and iOS.
I think it's default for iOS, for android in my case adding paddingVertical: 0, to text style worked.
Apparently the solution for iOS is not as trivial as one might think.
While on Android you can just add this style:
paddingTop: 0,
paddingBottom: 0,
On iOS you'd need this:
multiline={true}
But what if you want a single line? This is my workaround:
<TextInput
value={comment}
onChangeText={setComment}
{/*The lines below are the important ones*/}
multiline={true}
blurOnSubmit={true}
autoCorrect={false}
onSubmitEditing={handleOnSubmit}
/>
Let me explain what's happening here:
As we said, multiline={true} vertically aligns the text.
To avoid adding a new line after pressing the submit button, you need blurOnSubmit={true}. This also closes the keyboard and although in my case that's ok, I haven't figured a way around it, unfortunately.
I used autoCorrect={false} because without it, the submit button will change the TextInput's value to the automatically selected suggestion (if any).
Finally, if you want to perform some action when the submit button is pressed, then you need onSubmitEditing={handleOnSubmit}.
What a journey to just align a text...
To get text aligned vertically center on both platforms use:
For android use textAlignVertical: "center"
For ios use justifyContent: "center"