Mixing
How to change list item background color when selected in react native?
0
I'm using native-base ui kit. I'm trying to change the background color of selected items in sidebar. But how to do that? I've made changes to this theme/variablesplatform.js file.
listBg: "#008080",
listBorderColor: "#c9c9c9",
listDividerBg: "#f4f4f4",
listBtnUnderlayColor: "#008080",
listItemPadding: platform === "ios" ? 10 : 12,
listNoteColor: "#808080",
listNoteSize: 13,
But can't see any changes. Please help me to find any solution? This is how the ListItem within sidebar looks like
<List
dataArray={datas}
renderRow={data =>
<ListItem
button
noBorder
onPress={() => this.props.navigation.navigate(data.route)}
>
<Left>
<Image
source={data.icon }
style={{width:30,height:30}}
/>
<Text style={styles.text}>
{data.name}
</Text>
</Left>
{data.types &&
<Right style={{ flex: 1 }}>
<Badge
style={{
borderRadius: 3,
height: 25,
width: 72,
backgroundColor: data.bg
}}
>
<Text
style={styles.badgeText}
>{`${data.types} Types`}</Text>
</Badge>
</Right>}
</ListItem>}
/>
Please help me.
react-native jsx listitem native-base
edited Nov 20 '18 at 20:54
Mateo Guzmán
371215
asked Nov 20 '18 at 10:16
anuanu
358526
add a comment |
0
I'm using native-base ui kit. I'm trying to change the background color of selected items in sidebar. But how to do that? I've made changes to this theme/variablesplatform.js file.
listBg: "#008080",
listBorderColor: "#c9c9c9",
listDividerBg: "#f4f4f4",
listBtnUnderlayColor: "#008080",
listItemPadding: platform === "ios" ? 10 : 12,
listNoteColor: "#808080",
listNoteSize: 13,
But can't see any changes. Please help me to find any solution? This is how the ListItem within sidebar looks like
<List
dataArray={datas}
renderRow={data =>
<ListItem
button
noBorder
onPress={() => this.props.navigation.navigate(data.route)}
>
<Left>
<Image
source={data.icon }
style={{width:30,height:30}}
/>
<Text style={styles.text}>
{data.name}
</Text>
</Left>
{data.types &&
<Right style={{ flex: 1 }}>
<Badge
style={{
borderRadius: 3,
height: 25,
width: 72,
backgroundColor: data.bg
}}
>
<Text
style={styles.badgeText}
>{`${data.types} Types`}</Text>
</Badge>
</Right>}
</ListItem>}
/>
Please help me.
react-native jsx listitem native-base
edited Nov 20 '18 at 20:54
Mateo Guzmán
371215
asked Nov 20 '18 at 10:16
anuanu
358526
I was reading the docs and I think you need to use theStyleProvidercomponent ofnative-baseand provide the custom styles there. docs.nativebase.io/Customize.html
– Mateo Guzmán
Nov 21 '18 at 14:05
add a comment |
0
0
0
I'm using native-base ui kit. I'm trying to change the background color of selected items in sidebar. But how to do that? I've made changes to this theme/variablesplatform.js file.
listBg: "#008080",
listBorderColor: "#c9c9c9",
listDividerBg: "#f4f4f4",
listBtnUnderlayColor: "#008080",
listItemPadding: platform === "ios" ? 10 : 12,
listNoteColor: "#808080",
listNoteSize: 13,
But can't see any changes. Please help me to find any solution? This is how the ListItem within sidebar looks like
<List
dataArray={datas}
renderRow={data =>
<ListItem
button
noBorder
onPress={() => this.props.navigation.navigate(data.route)}
>
<Left>
<Image
source={data.icon }
style={{width:30,height:30}}
/>
<Text style={styles.text}>
{data.name}
</Text>
</Left>
{data.types &&
<Right style={{ flex: 1 }}>
<Badge
style={{
borderRadius: 3,
height: 25,
width: 72,
backgroundColor: data.bg
}}
>
<Text
style={styles.badgeText}
>{`${data.types} Types`}</Text>
</Badge>
</Right>}
</ListItem>}
/>
Please help me.
react-native jsx listitem native-base
edited Nov 20 '18 at 20:54
Mateo Guzmán
371215
asked Nov 20 '18 at 10:16
anuanu
358526
I'm using native-base ui kit. I'm trying to change the background color of selected items in sidebar. But how to do that? I've made changes to this theme/variablesplatform.js file.
listBg: "#008080",
listBorderColor: "#c9c9c9",
listDividerBg: "#f4f4f4",
listBtnUnderlayColor: "#008080",
listItemPadding: platform === "ios" ? 10 : 12,
listNoteColor: "#808080",
listNoteSize: 13,
But can't see any changes. Please help me to find any solution? This is how the ListItem within sidebar looks like
<List
dataArray={datas}
renderRow={data =>
<ListItem
button
noBorder
onPress={() => this.props.navigation.navigate(data.route)}
>
<Left>
<Image
source={data.icon }
style={{width:30,height:30}}
/>
<Text style={styles.text}>
{data.name}
</Text>
</Left>
{data.types &&
<Right style={{ flex: 1 }}>
<Badge
style={{
borderRadius: 3,
height: 25,
width: 72,
backgroundColor: data.bg
}}
>
<Text
style={styles.badgeText}
>{`${data.types} Types`}</Text>
</Badge>
</Right>}
</ListItem>}
/>
Please help me.
react-native jsx listitem native-base
react-native jsx listitem native-base
edited Nov 20 '18 at 20:54
Mateo Guzmán
371215
asked Nov 20 '18 at 10:16
anuanu
358526
edited Nov 20 '18 at 20:54
Mateo Guzmán
371215
asked Nov 20 '18 at 10:16
anuanu
358526
edited Nov 20 '18 at 20:54
Mateo Guzmán
371215
edited Nov 20 '18 at 20:54
Mateo Guzmán
371215
edited Nov 20 '18 at 20:54
Mateo Guzmán
371215
371215
asked Nov 20 '18 at 10:16
anuanu
358526
asked Nov 20 '18 at 10:16
anuanu
358526
asked Nov 20 '18 at 10:16
anuanu
358526
358526
I was reading the docs and I think you need to use theStyleProvidercomponent ofnative-baseand provide the custom styles there. docs.nativebase.io/Customize.html
– Mateo Guzmán
Nov 21 '18 at 14:05
add a comment |
I was reading the docs and I think you need to use theStyleProvidercomponent ofnative-baseand provide the custom styles there. docs.nativebase.io/Customize.html
– Mateo Guzmán
Nov 21 '18 at 14:05
I was reading the docs and I think you need to use the
StyleProvider component of native-base and provide the custom styles there. docs.nativebase.io/Customize.html– Mateo Guzmán
Nov 21 '18 at 14:05
I was reading the docs and I think you need to use the
StyleProvider component of native-base and provide the custom styles there. docs.nativebase.io/Customize.html– Mateo Guzmán
Nov 21 '18 at 14:05
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53390753%2fhow-to-change-list-item-background-color-when-selected-in-react-native%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53390753%2fhow-to-change-list-item-background-color-when-selected-in-react-native%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I was reading the docs and I think you need to use the
StyleProvidercomponent ofnative-baseand provide the custom styles there. docs.nativebase.io/Customize.html– Mateo Guzmán
Nov 21 '18 at 14:05