Button style is wrong at web

[Coolister-Ye]

Current behaviour

The button style is wrong at web. It should be a circle around the date, while it render as a line. However, I also test it at ISO, it work correctly. I cannot figure out why.

How to reproduce?

I put the demo code into a component.

import React from "react";
import { View, Text } from "react-native";
import { Button } from 'react-native-paper';
import { DatePickerModal } from 'react-native-paper-dates';
import { SafeAreaProvider } from "react-native-safe-area-context";
import { enGB, registerTranslation } from 'react-native-paper-dates'
registerTranslation('en-GB', enGB)


export default function DatePicker({ }) {

    const [date, setDate] = React.useState(undefined);
    const [open, setOpen] = React.useState(false);

    const onDismissSingle = React.useCallback(() => {
        setOpen(false);
    }, [setOpen]);

    const onConfirmSingle = React.useCallback(
        (params) => {
            setOpen(false);
            setDate(params.date);
        },
        [setOpen, setDate]
    );

    return (
        <SafeAreaProvider>
            <View style={{ justifyContent: 'center', flex: 1, alignItems: 'center' }}>
                <Button onPress={() => setOpen(true)} uppercase={false} mode="outlined">
                    Pick single date
                </Button>
                <DatePickerModal
                    locale="en-GB"
                    mode="single"
                    visible={open}
                    onDismiss={onDismissSingle}
                    date={date}
                    onConfirm={onConfirmSingle}
                />
            </View>
        </SafeAreaProvider>
    );
}

And then I just impor it in App.js. I'm using nativewind to do some styling.

<SafeAreaView className="pt-10 h-screen bg-slate-200">
      <DatePicker />
</SafeAreaView>

Preview

Your Environment

software	version
ios	x
android	x
react-native	"0.74.2"
react-native-paper	"^5.12.3"
node	x.x.x
npm or yarn	x.x.x
expo sdk	"~51.0.17"

[github-actions]

Hey! Thanks for opening the issue. Can you provide more information about the issue? Please fill the issue template when opening the issue without deleting any section. We need all the information we can, to be able to help. Make sure to at least provide - Current behaviour, Expected behaviour, A way to reproduce the issue with minimal code (link to snack.expo.dev) or a repo on GitHub, and the information about your environment (such as the platform of the device, versions of all the packages etc.).

[github-actions]

Hey! Thanks for opening the issue. Can you provide a minimal repro which demonstrates the issue? Posting a snippet of your code in the issue is useful, but it's not usually straightforward to run. A repro will help us debug the issue faster. Please try to keep the repro as small as possible. The easiest way to provide a repro is on snack.expo.dev. If it's not possible to repro it on snack.expo.dev, then you can also provide the repro in a GitHub repository.

[Coolister-Ye]

I'm trying to create a snack repo, but it failed because I'm using expo router. The snack require an App.js file at the root level of the project. And then I tried to copy and paste the code into App.js, which worked fine on snack and rendered correctly. You can check on this snack. It seems the problem maybe related to the expo router. You can also check all my project code in this Github repository. Basically, I'm just using the expo router template to create the project and added a new tab under './app/(tabs)/sea.tsx'. The new tab will import and use DatePickerModal component. You may need to clone this project to local and run npx expo start -c to reproduce the problem.

The main code is as below.

import React from 'react';
import { View } from 'react-native';
import { Button } from 'react-native-paper';
import { DatePickerModal } from 'react-native-paper-dates';
import { SafeAreaProvider } from 'react-native-safe-area-context';

export default function SeaScreen() {

    const [date, setDate] = React.useState(undefined);
    const [open, setOpen] = React.useState(false);

    const onDismissSingle = React.useCallback(() => {
        setOpen(false);
    }, [setOpen]);

    const onConfirmSingle = React.useCallback(
        (params) => {
            setOpen(false);
            setDate(params.date);
        },
        [setOpen, setDate]
    );

    return (
        <SafeAreaProvider>
            <View style={{ justifyContent: 'center', flex: 1, alignItems: 'center' }}>
                <Button onPress={() => setOpen(true)} uppercase={false} mode="outlined">
                    Pick single date
                </Button>
                <DatePickerModal
                    locale="en-GB"
                    mode="single"
                    visible={open}
                    onDismiss={onDismissSingle}
                    date={date}
                    onConfirm={onConfirmSingle}
                />
            </View>
        </SafeAreaProvider>
    );
}

[github-actions]

Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.

[rdfurman]

We're seeing this issue as well on web only. No work around?

[iM-GeeKy]

@Coolister-Ye The web examples in the documentation and example app don't seem to exhibit this behavior. I'm also using the latest expo-router on a personal project and don't see this issue with the latest version of react-native-paper-dates on web.

[rdfurman]

I checked out @Coolister-Ye's example project and confirmed it is exhibiting the described behavior. This is in addition to the issue showing up in our own project. Perhaps it has something to using the Tabs layout?