How can I properly use sprite sheets in react-native? Or do people typically load icons separately and not use sprite sheets? Mind you this is not sprites for animation, just pure icons.
For example here is my sheet...
And here is the css for one icon...
.Sprite {
background-image: url(./assets/images/spritesheet.png);
background-repeat: no-repeat;
display: inline-block;
}
.IconMenu30px {
width: 30px;
height: 30px;
background-position: -53px -5px;
}
And I tried to translate this into React Native like this...
<Image source={require("../assets/images/spritesheet.png")} style={styles.menuIcon} />
const styles = StyleSheet.create({
menuIcon: {
width: 30,
height: 30,
},
})
But apparently there is no background position attribute in React Native.
Did you try
<ImageBackground />
This might help with your issue
Related
I'm new to react native and I'm trying to do horizontal scrolling with scroll view but it is not scrolling at all.. it is completely static
I'm currently using react-native: "0.68.2", expo: "~45.0.0"
This is my code
<ScrollView
horizontal
showsHorizontalScrollIndicator={true}
contentContainerStyle={{flexGrow:1}}
>
<BookCard/>
<BookCard/>
</ScrollView>
and the code for the Book Card is
const BookCard = styled.View
background-color: ${(props) => props.theme.colors.bg.primary};
border-radius: 5px;
margin-left: 5px;
flex-direction: row;
height: 150px;
border-radius: 5px;
width: 70%;
I have also added a View with flex:1 around the scroll view but it still doesn't work... please what am I getting wrong?
actually i just worked out the issue ... It was because i set the width of the bookcards to a percentage value that is why it didn't work i.e like if you set the cards to width:50% and you put 4 cards in the scrollview , it only scrolls to 2 cards because the 2 cards add up to 100% of the scrollview (i was quite dumb lol)
I replaced the percentage values with px values and no matter the amount of items, it's scrolling perfectly now.. Thank you
I need to change a color of a <Text/> that's inside a TouchableHighlight styled-component. Already tried:
const Button = styled.TouchableHighlight`
width: 100%;
justify-content: center;
background-color: #337ab7;
Text {
color: orange;
}
`;
Didn't worked... also this Text it's from react-native, not an styled-component component.
create separate style component for Text
// styled component
const StyledText = styled.Text`
color: orange;
`;
and use StyledText instead of Text in your code
I have a simple Button Component in my react native app, made with just styled-components.
This is what it looks like:
const ButtonContainer = styled.TouchableOpacity`
border-radius: 12px;
margin: 6px;
flex-basis: ${props => props.flexBasis || "20%"};
background: ${props => props.backgroundColor || "orange"};
justify-content: center;
align-items: center;
flex: ${props => props.flex || 0};
`;
So when I pass in a flex prop like this <ButtonContainer flex="1" /> I want it to fill the available space. It works as expected.
But when I don't pass in the flex prop, I want it to behave like I never set it. (Don't take up the whole available space).
This does not work. It's still taking up all the available space.
When I get rid of the line flex: ${props => props.flex || 0}; all together it's working, but I want to set it to flex: 1 sometimes (reusable component)
So what is the default flex setting in a react-native component?
I already tried undefined, null and -1 but no effect at all.
setting flex: none worked for me,
so -
const Component = styled.View`
flex: ${props => props.flex || 'none'};
`;
I am using react-native-dynamic-fonts to inject dynamic fonts at run time.
I downloaded Spicy Rice from Google Fonts and I am using it like so:
export default class App extends Component<Props> {
componentWillMount() {
loadFonts([{name: 'SpicyRice-Regular', data: font, type: 'ttf'}], true).then(function(names) {
console.log('Loaded all fonts successfully. Font names are: ', names);
});
}
render() {
return (
<View style={{flex: 1, marginTop: 150}}>
<Text style={{fontFamily: 'SpicyRice-Regular', fontSize: 25, color: 'red'}}>Foo</Text>
<WebView style={{ flex: 1, }} source={content} />
</View>
);
}
}
I see my console log and it returns SpicyRice-Regular. However, when I try to use it in my WebView on Android, it doesn't seem to work.
My WebView simply uses:
p {
font-size: 150px;
font-family: 'SpicyRice-Regular';
font-weight: 400;
font-style: normal;
}
However, it renders on iOS but doesn't on Android.
iOS:
Android:
Font's don't waterfall through for Android Webview. Just like the Chrome browser, each instance of a Webview is sandboxed into its own environment.
You do have access to the filesystem though and you can to link directly to the font asset using url("file:///android_asset/fonts/<filename>") in the Webview CSS properties so something like this should work:
p {
font-size: 150px;
font-family: 'SpicyRice-Regular';
font-weight: 400;
font-style: normal;
src: url('file:///android_asset/fonts/SpicyRice-Regular.ttf')
}
Please how can we set the map div to be height: 100% of its container?
I have tried this within a bootstrap template content section, but all I get is height of 0px. Even Google-Dev tools shows #map height as 0px.
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
}
Set
#map{
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
and give its container position: relative.
The above answer didn't work for me, but this did:
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
width: 100%;
}
..from A full screen leaflet.js map
Leaflet needs an absolute height, and height: 100% only refers to the height of the parent element - if this isn't set, it will default to 0.
If your map is the only element in the body, use height: 100vh to match the height of the viewport (Example).
If your map is inside a container, set height: 100vh on the container (or other desired height) and height: 100% on the map element (Example).