Using "compact" Picker on iOS in headerTitle component of Stack.Screen pushes it to the left rather than centre

Abierto
  • ¿Algo no está bien?
#778 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
35/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
javascript, react-native
Área
frontend, mobile

Línea de trabajo

Start by reproducing the issue with the provided Stack.Screen example, which uses DateTimePicker with display="compact" as headerTitle on iOS. Check the repository's iOS picker and navigation examples or tests for header layout behavior. Done means the compact picker remains centered in the header; the issue does not name a specific source file or test.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Question

Hi, I'm using the latest Expo supported version 6.7.3 so hopefully this is fixed in a later version but currently when I attempt to use the picker as the header component of Screen the header get's pushed to the left. With any other combination of controls this isn't the case. Is there a workaround for this or some other approach I can use?

Thanks!

<Stack.Screen
  options={{
    title: 'Logbook',
    headerTitle: () =>
      Platform.OS === 'android' ? (
        <Button
          title={format(date, 'dd/MM/yyyy')}
          type="clear"
          onPress={handlePress}
          buttonStyle={{
            backgroundColor: Color(theme.colors.primary)
              .alpha(0.2)
              .string(),
          }}
          size="sm"
        />
      ) : (
        <DateTimePicker
          value={date}
          is24Hour
          onChange={handleDateChange}
          display="compact"
        />
      ),
    headerRight: () =>
      selectedIds.length > 0 && (
        <Icon
          name="label"
          type="material-icons"
          color={theme.colors.primary}
          onPress={handleClassificationPress}
        />
      ),
  }}
/>
Lenguaje dominante
JavaScript
Estrellas
2.9k
Forks
459
Merge medio
4 d 16 h
PR fusionados (30 d)
5

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de react-native-datetimepicker/datetimepicker

Todos los issues de react-native-datetimepicker/datetimepicker

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.