question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Apply styles to drawer section items

See original GitHub issue

I want to apply some styles to drawer section

  1. Apply background color to drawer section
  2. Change icon color and size
  3. Change fontsize and color of value

My code `

        <Drawer style={{container:{backgroundColor:'#f4f4f4'}}}>
           <Drawer.Section  style={{container:{backgroundColor:'#f4f4f4'},icon:{color:'red'},value:{color:'green',fontSize:20}}}
              items={[
                      { icon: 'home', value: 'Recent Posts', onPress:this.recentPostFunction=()=>{this.contentFunction('recent')} },
                      { icon: 'format-list-bulleted', value: 'My Posts', onPress:this.recentPostFunction=()=>{this.contentFunction('mypost')} },
                    ]}
            />
        </Drawer>`

Only the drawer background color is changed. Other styles not applied. How to apply it?

Issue Analytics

  • State:open
  • Created 6 years ago
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

6reactions
MiteshKalal7commented, Feb 28, 2021

<Drawer.Section title={ <Text style={{color: colors.textColor}}>Preferences</Text> }> </Drawer.Section>

2reactions
bststcommented, Jun 21, 2018

Looks like it’s still an issue. Drawer Section item styles (e.g. font size) are not working, neither when specified as a style prop or when passed in to ThemeProvider.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Drawer Navigator | React Navigation
To add additional items in the drawer, you can use the DrawerItem component: ... Style object to apply to the Text style inside...
Read more >
Custom Drawer in react navigation - Stack Overflow
In my react native project I have custom drawer with screens like screen1 and screen2. Screen1 is used for stack navigator and in...
Read more >
Drawer.Section · React Native Paper
Drawer.Section. A component to group content inside a navigation drawer. ... Item label="First Item" active={active === 'first'} onPress={() ...
Read more >
Customizing React Navigation Drawer | by Ike Njoku - Medium
Drawer options are rendered as DrawerItems. These are contained in a SafeAreaView component, which is usually nested in a ScrollView to ensure ...
Read more >
Android Material Component: Navigation Drawer Styling (Part II)
And since each item is made of several elements (icon, text, background), you have to think about the states of each element to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found