I have been following the react-navigation getting started guide. I’ve not modified anything beyond adding...
options={{
...TransitionPresets.ModalPresentationIOS,
cardOverlayEnabled: true,
gestureEnabled: true,
headerShown: false
}}
...to the modal to make it look like iOS 13.
It works and animates great, but I’d like the back-background to be black. In the screenshot below, I’m talking about the darkest grey color that the time and battery icons are on.
I tried setting the background of the Theme to black, but that made all the cards black. Is there a way to only make that far-far background black?
I’m sure I’m not being clear, but thanks in advance for any guidance.
You should wrap your navigator into a View like this:
<View
style={{
backgroundColor: "black",
flex: 1,
}}
>
<Stack.Navigator>
{/* Your screens */}
</Stack.Navigator>
</View>
if i get your question right it's about the theme color, which you can find in the index.HTML file.
You should see a meta tag in the head which looks something like this:
<meta name="theme-color" content="#000000" />
Let me know if i got it right.
Related
I am writing a react native app.
I want to make a press. See more like we usually see for more information of something. How can I do that?
Like here
Text components have an onPress prop, where you can pass an arrow function
<Text onPress = {() => this.myFunction()}>
See More
</Text>
Note: Adding some style props, eg color: 'blue' and fontWeight: 600 can help your text look pretty similar to your provided photo.
When Admin-on-rest is running on safari mobile (and presumably all small screens) wide views cannot be scrolled horizontally. This is particularly problematic because in List View often the "Edit" link is on the right of a row.
There is no way to pinch-zoom out to expose the missing parts of the page.
This can be reproduced on the demo site: https://marmelab.com/admin-on-rest-demo/#/
Looks like the culprit is a CSS style using flex-direction: column
Removing this style reinstates horizontal scrolling.
Is this a bug (possibly a cross-browser issue?) or is this limitation necessary for a reason that I'm not aware of?
Possible solution: Remove overflow-x: hidden on the table container which allows a wide table of results to be scrolled horizontally but keeps the overall page width the same size as the page so buttons/filters/etc are aligned correctly.
Don't use the datagrid on small screens. See the documentation about this: https://marmelab.com/admin-on-rest/Theming.html#responsive-utility
I'm using this way to horizontally scroll in small size devices:
export const ReservationList = (props) => (
<div style={{
display: "flex",
flex: "1 1 auto",
overflowY: "hidden",
overflowX: "scroll"
}}>
<List {...props} title="Reservation List">
<Datagrid>
...
</Datagrid>
</List>
</div>
);
how to add the image icon in the segmented bar in nativescript-angular. can you please help me with this
<SegmentedBar #tabs [selectedIndex]="selectSegment">
<SegmentedBarItem title="test1"></SegmentedBarItem>
<SegmentedBarItem title="test2"></SegmentedBarItem>
<SegmentedBarItem title="test3"></SegmentedBarItem>
<SegmentedBarItem title="test4"></SegmentedBarItem>
</SegmentedBar>
An easy way to add icons to your Nativescript Segmented Bar items is to use FontAwsome (or any other icon font for that matter).
1: Check out this (http://www.nativescriptsnacks.com/videos/2016/03/07/nativescript-and-font-awesome.html) short five minute video on how to install FontAwsome to your {N} app.
2: Once you install the icon font. Assign style="font-family: 'fontAwesome' " attribute to SegmentedBar xml/"html" tag;
3: Check out http://fontawesome.io/cheatsheet/ to figure out the unicode for the icon you want to use and paste that unicode to the title attribute of the relevant SegmentedBarItem tag. TIP: make sure the code is in the right format. Don't copy the square braces shown on the cheatsheet, just what the string that appears inside them.
THATS IT! Your code should now look something like this:
<SegmentedBar #tabs [selectedIndex]="selectSegment" style="font-family: 'FontAwesome'; color: #eee; background-color: #31394C;">
<SegmentedBarItem title=""></SegmentedBarItem>
<SegmentedBarItem title=""></SegmentedBarItem>
<SegmentedBarItem title=""></SegmentedBarItem>
<SegmentedBarItem title=""></SegmentedBarItem>
</SegmentedBar>
This image:
shows the end result of the above code on an android emulator.
the SegmentedBar does not have options to assign images for each SegmentedBarItem. This is a valid scenario for TabView. For SegmentedBar you can only set background-image for the whole Segmented bar which can be used to apply image pattern but is no applicable to apply different icons for the different SegmentedBarItems
please have a look at the below link
https://github.com/NativeScript/nativescript-angular/issues/790
For more flexible way you can create a custom SegmentedBar and adjust for your needs. Read more
here.
I got two input text. First one is for an email, the problem comes when I write more text than the width of this input, the rest of the text doesn't see. The normal behavior would be scroll horizontally to see the rest of the text, right?
I don't know if I'm missing something, but it doesn't work.
Here is the example code: rnplay.org
Edit: This is the effect I wanna get, this is from UI Explorer Example from official React Native repo:
Thank you!
I was be able to solve it.
I don't know why, but the problem comes if I have set both paddingTop and paddingBottom to the input text.
If I remove one of them, then the input text works perfectly, here is an example: Input text working well
I hope this can help someone too.
Thanks.
I threw a hacky thing together here, basically wrapping the TextInput in a horizontal ScrollView:
https://rnplay.org/apps/q7M2Pg
<View style={{ backgroundColor: 'white', overflow: 'hidden' }}>
<ScrollView horizontal={true} style={{ marginBottom:-7 }}>
<TextInput
style={ [styles.loginFormInput, {width:width}] } />
</ScrollView>
</View>
Theoretically to make this better, you could call an onChangeText method to set the width to make it nicer (though a native way would be ideal of course).
Don't see any configuration for that in the source at all however, hopefully someone can come along with a better answer!
So I'm trying to give my air application a custom style, I've set the showFlexChrome to false and that's ok it works. now I would like to use an image window I designed in photoshop as the background (because now there is no background in the application).
I did the following but it doesn't work
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:views="be.KHM.ProjectManager.models.views.*"
width="850" height="500" currentState="index" creationComplete="init()"
showFlexChrome="false"
horizontalScrollPolicy="off"
verticalScrollPolicy="off"
backgroundColor="white"
>
< mx:Style>
WindowedApplication
{
backgroundColor: white;
backgroundImage: "be/KHM/ProjectManager/assets/mysimpleproject_interface.jpg";
}
</ mx: Style>
The path is correct and I don't receive any errors but the background of my air app is still transparent. I tried to put a canvas around everything between my windowedapplication and give that a background image, but because I work with states it will give me the error that the states cannot be initiated within a canvas or something like that.
Try putting a ClassReference("be/....") for the backgroundImage style setter.
Edit:
Oh, wait... that's not a class.
The problem could be that you have the wrong combo of showFlexChrome and the FlexChrome property in your xml compiler file.
My suggestion would be to take a look at the source of the SalesForce app that someone built when 1.0 came out. It has some decent css and window styling examples.